image rollover highlight

[traveller]

1) Script Title: Textual tooltip Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

3) Describe problem: Duplicating the content.
I have an image of a complex part, made up of multiple smaller parts, and a table of those component parts. What I wanted was to rollover individual parts in the table and have the image 'highlight' the appropriate subpart. Having looked around for a script to do that job the ONLY one I came up with was the textual tool tip, and after replacing the text with images of each bit highlighted it worked perfectly.

But here's the rub, I have two complex parts to show on the same page .I read in the stickies that multiple versions of a script on the same page isn't something you guys overly favour, so what I'm asking for then is; is there another similar script I can hack at to do the job?

[ddadmin]

Do you mean an image that's actually composed of multiple images, and you want some reaction when the mouse rolls over the individual smaller images? A link to what you have so far will go a long way in explaining the set up you're looking for.

[traveller]

Sorry, should have thouught of that. Heres a rough demo - you can see the image half way down the page when you rollover the table cells
url removed

[ddadmin]

With this script it's actually very easy to get it to work multiple times on the same page. Simply replace the default change_text() function inside the code of Step 1 with the below instead:

function changetext(whichcontent, targetdiv){
if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById(targetdiv):document.all.targetdiv
cross_el.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>'
}
}

Then, for each of the onMouseover code embedded inside your links, modify them to the following new structure (changes in red), ie:

<a href="index.html" onMouseover="changetext(content[1], 'descriptions')"></a>

In essence, you're now explicitly passing in the ID of the DIV the description should be shown in (in this case, "descriptions") inside each changetext() function call.

For your second instance of the script on the page then, you'd first define the desired description array, ie:

var contenty=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
contenty[0]='<br><big><b>Menus and navigation systems</b></big><br>Click here for DHTML scripts that help enhance your site\'s navigability, such as collapsible menus, sliding menu bars etc.'
contenty[1]='<br><big><b>Special document effects</b></big><br>With the advent of DHTML, webpages are one step closer to its cousin, TV, in terms of special effects...'
contenty[2]='<br><big><b>Scrollers</b></big><br>Up until now, adding a scroller or tickertape to your website usually meant using a slow Java applet. Not anymore. Click here for DHTML scrollers that accomplish the same task with minimal download time.'
contenty[3]='<br><big><b>Image effects</b></big><br>Add lightweight effects to your existing images using these scripts. Make them fly, light up, turn static, all without paying the cost of slow downloading time.'
contenty[4]='<br><big><b>Links and buttons</b></big><br>Add tooltips to your text links, rollover effects to your form buttons, keyboard features to your document, and more.'

Then, create a blank DIV with a unique ID that will house these descriptions, ie:

<div id="descriptions2"></div>

Then finally, inside the links that will show these descriptions onMouseover, do something like:

<a href="index.html" onMouseover="changetext(contenty[1], 'descriptions2')"></a>

[traveller]

With this script it's actually very easy to get it to work multiple times on the same page.

Yikes, that's "very easy"?! Okay, it's taken me some time to modify the href's to the table row mouseovers, etc. but it does work at the end of it. Many thanks for that assistance - I knew I simply had to refer each instance to a particular image but was struggling to reference them correctly.

[ddadmin]

Well, easy technically to do but hard to explain.