looking for a image to text script

[rizquine]

i am looking for a script that i can apply to a image so that some text will show up when you rollover the image. is there a script on this site that i missed or one that somewhere else that could help me?
thank you
riz

[djr33]

Well... you can't do a traditional rollover image and have text instead.

However, javascript will do that for you pretty easily. I don't have a script onhand right now, but basically:
You use this code:
<div id="name" onmouseover="jsfunction()"****>
<img src="something.jpg" onmouseover="jsfunction()"****>
</div>
Then you use a javascript with the "jsfunction()" function that will change the contents of the div. It's something like document.this.div (ex: document.this.name)

****you only need the onmouseover in one of those places.... but it'll affect how it works. If its on the div, then you'll have to make it switch back and forth or something. If it's on the image, then you'll have to have it also on the text (if you want it to switch back and forth). Or, you could just have it be a one time thing and have it stay as text, if that's what you want.
As for text, I think this works:
<font onmouseover="jsfunction()">here's your text that'll be in the div above</font>
The font tags just specify the onmouseover thing, like an image.



You also could just MAKE an image with the text on it.... that might be a lot easier. If you want to get into complex stuff, then you could look into PHP and it's GD functions that actually allow you to create images (including ones from text), so it would dynamically generate an image that would have your text on it each time. but... if it's unchanging, you could just go with doing it once in photoshop.... not hard.



Also, another easy solution would be to use the tooltip script at dd. check those out.... they do a little popup of text when you rollover something (in this case an image)... might be less confusing, and do what you want... but you can't click/highlight the text, 'cause it'll dissapear once you roll off the image.... so... yeah.


One of those sound good?

[jscheuer1]

Are you looking for a tool tip kind of thing? Or, do you want the text to have a transparent background and be directly over the image? There are a few tool tip scripts here. To have the text just appear over an image, the easiest way would be to use the image as a background-image for a division or table cell and then have the text appear over it:

<div style="background-image:url('some.gif');width:100px;height:30px;" onmouseover="this.innerHTML='Hey There!';" onmouseout="this.innerHTML='';"></div>

[djr33]

That code is cool... good idea.
The only question is if he wants the text over the image or replacing it...