PDA

View Full Version : Help Me :)

exica
11-18-2004, 11:06 AM
Hi. I have a question which *hopefully* one of you will be able to answer. I'm making a team website for my counter-strike team and I have a question on how to do the following:
I have a roster panel in which our images will be placed on. What I want to happen is which you place your mouse over (hover) our pictures in the panel, I want text to show up in a table under the pictures. I know most of you don't understand what I'm saying so I did a quick picture to show exactly what I mean:

http://exica.0x3g3n.com/help.jpg

http://exica.0x3g3n.com/help.jpg


Thank you so much to whomever helps me!
*edit* Also, the white box in which the names will be at when hovered, that will just be plain white to begin with before anyone hovers the images. Thanks once again!
Horus_Kol
11-18-2004, 11:19 AM
you'll get a better response if you had a more descriptive title to the thread...

plus, this is a client side question.

sounds like this can be done with a bit of javascript "onMouseOver" events and writing to the "innerHTML" property of the element...
exica
11-18-2004, 11:31 AM
can you explain what i should exactly do? thanks in advanced
Horus_Kol
11-18-2004, 11:50 AM
in the image tag, you want a "onMouseOver" event...


<img src='pic.jpg' onMouseOver='showText(1)'>


the number is an identifier, so you know which image has been hovered over


you need to specify an ID attribute for the element to be written to:


<td>
<div id='dyn_text'></div>
</td>



and you need a script in the <head> section:


<head>
.. other <head> bits ..

<script type='text/javascript'>

function showText(img)
{
if (img == 1)
{
document.getElementById('dyn_text').innerHTML = "Text relate to image 1";
}
else if (img == 2)
{
document.getElementById('dyn_text').innerHTML = "Text relate to image 2<br> A second line<br> and a third one with <b>bold</b> text...";
}
}

</script>
exica
11-18-2004, 12:20 PM
YAY! Thanks alot for the help. But I have one more problem i've run into. When I hover over it, it works fine and dandy, but when I take my mouse off of the image, the text is still there. How would I go about making the text go away after i've taken my mouse off of the image. Thanks in advanced once again :)
exica
11-18-2004, 12:21 PM
And also, is there a way to change the dyn_text to an image? For example, instead of having text pop up, would it be possible to have an image that says their name instead fo plain text? :)
Horus_Kol
11-18-2004, 01:14 PM
you can put any HTML in the innerHTML, so you can just use:

document.getElementById('dyn_text').innerHTML = "<img src='1.jpg'>";


if you want to clear the box, the you need to use an onMouseOut event - this should be a little simpler as you can use the same function without any if..else for all images...