Html help with image?

Question

How can you have text over a picture when the mouse is over it?

If you know what i'm talking about? When you put the mouse over an image and text shows up saying whatever. Does anyone know the code? For an image <img src= (EX)

Answer 1

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;

/* this styles the div approach to providing the message */

#img1Msg {

border: 2px solid red;

background-color: #FDD;

position: absolute;

top: 0;

left: 0;

display: none;

padding: 6px;

width: 200px;

}

&lt;/style&gt;

&lt;script&gt;

// this handles the mouseover/-out events for the

// div approach to providing the message

function msg(iRef, show) {

var d = document;

var m = d.getElementById(iRef.id + &#039;Msg&#039;);

if (show) {

var t = iRef.offsetTop;

var l = iRef.offsetLeft;

// you may prefer to place the message

// somewhere else - I just put it at the

// top, left corner of the image

m.style.top = t + &#039;px&#039;;

m.style.left = l + &#039;px&#039;;

// now that the message is positioned,

// reveal it

m.style.display = &#039;block&#039;;

}

else {

// hide the message

m.style.display = &#039;none&#039;;

}

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;!--

- the title attribute will be displayed in a &quot;tool-tip&quot; style over the image

- don&#039;t use the alt tag for your desired message...only IE incorrectly uses it

--&gt;

&lt;img src=&quot;EX&quot; alt=&quot;description, in case image is missing&quot; title=&quot;whatever text you want to display as a tool-tip type of message&quot; /&gt;

&lt;!--

- onmouseover/-out events will show/hide a div that contains the message for this image

- give the image an id and the corresponding message div an id the uses the image&#039;s id plus the string &quot;Msg&quot;

- makes it easy to compose the div&#039;s id from the image&#039;s and allows many img/msg sets to be embedded without

name collisions

--&gt;

&lt;img id=&quot;img1&quot; src=&quot;EX&quot; onmouseover=&quot;msg(this, true);&quot; onmouseout=&quot;msg(this, false);&quot; /&gt;

&lt;div id=&quot;img1Msg&quot;&gt;whatever text you want displayed as a separate, additional block of text styled as you wish&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

Answer 2

You should also use title=&quot;Popup Text Here&quot; too because it is supported in other browsers.

Answer 3

the code will look something like this:

&lt;img src=&quot;image.gif&quot; title=&quot;put what you want it to say when the mouse is over the image here&quot;&gt;

so do the image src thing to put up your image then after you write that and close it in quotation marks, put title after that and type what you want it to say when you are hovering over the image close that in quotation marks and close it with &gt; as seen in the example.

Answer 4

&lt;img src=&quot;images/icons/contactus_icon.gif&quot; width=&quot;80&quot; height=&quot;14&quot; alt=&quot;Contact Us&quot;&gt;

Answer 5

Here is the code for placing an image in html:

&lt;img src=&quot;EX&quot;&gt;

The above example is getting the image of the website specified. You may first need to upload the image to a website, free hosting site and then replace EX with your URL of your image.

To make text appear on mouse over.

&lt;img src=&quot;EX&quot; alt=&quot;You mouse went over the picture.&quot;&gt;

In the above example i am using an alteration. An alteration is what will appear if the image does not show up. Though if the image shows up and your mouse goes over the image the alteration will show.

As you saw i put the alt=&quot;&quot; after the image, there you can also add:

width=

height=

etc..