Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image Rollover Triggering Text Display 1

Status
Not open for further replies.
SpeedMule

SpeedMule

Technical User
Nov 24, 2003
31
US
Hi folks

I'd like an image (button) to trigger a text paragraph to display below it when the mouse pointer moves over that image. I'm using Photoshop/ImageReady but haven't managed to crack this one.

Would I need the same slice to contain both the active image button and the space for the text which it triggers?

(I know Macromedia uses the "disjoint rollover" for something similar).

I've assumed this is a question for the "js" aces out there!

Best regards

SM7
 
Sort by date Sort by votes
Hey man...

Here is a very simple example of that:
Code: 
<html>
<head>
<script language="javascript">
function changeText(img) {
  if (img.id == "img1") {
    document.getElementById("Desc").innerHTML = "This is all about the first image...";
  }
  if (img.id == "img2") {
    document.getElementById("Desc").innerHTML = "While this little note is all about the second image";
  }
}

</script>
<body>
<table border=0>
<tr><td><img id="img1" src="[URL unfurl="true"]http://www.beachbumsoftware.com/images/getcol1.gif"[/URL] onMouseOver="changeText(this)"></td>
    <td><img id="img2" src="[URL unfurl="true"]http://www.beachbumsoftware.com/images/colwheel.gif"[/URL] onMouseOver="changeText(this)"></td>
</tr>
<tr><td colspan=2><span id="Desc" style="width:200px;height:100px">&nbsp;</span></td>
</tr>
</table>    
</body>
</html>

let me know if you need help with any of the concepts. There is also some work that could be done making it cross browser. It works in IE5, I'm pretty sure it will work in NS6, but I haven't tested it.

have fun.

Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Upvote 0 Downvote
Thanks very much for your
reply, Travis

From first glance it looks as though
I can substitute my images/paths using
your code without too much trouble.

I'm on the case!

Cheers again & all the best

SM7
 
Upvote 0 Downvote
yeah, you should have no trouble...

just watch that your Text span or whatever kind of area you're using has the same ID that is referenced in the changeText function.

Glad to help.

Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
595
waubain
waubain
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
312
chikwendu
chikwendu
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
325
gmmastros
gmmastros
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
355
Samthyr
Samthyr
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top