script needed…

@chem3Jan 02.2006

Hello,

I am a new member around. I am also new at the web designing world…

I am using an image map for some image (see the link below), and I am looking for some script that will use the “title” of each hotspot on the image map and display that title as a description of the hotspot in the green bar which you see above the image ~~[URL=http://chem3.jeeran.com/Image.htm]~~HERE[/URL]

I want it to use the title of the hotspot (the title appears in the area code of the image map code:

[CODE]<area shape=”rect” coords=”0,0,100,100″ href=”http:///” [COLOR=Red]title=”here goes the title”[/COLOR]/>[/CODE]

) and display it at the center of the green bar with a specific color (say red):

See where I want the description to display ~~[URL=http://chem3.jeeran.com/See.jpg]~~HERE[/URL]

I want the title of each hotspot to appear in that green bar as the cursor hovers over the hotspot and disappear when the cursor moves away from the hotspot. I think I will need to use the ~~[B]~~onmouseover[/B] and ~~[B]~~onmouseout[/B] events in each hotspot area-code to call some function that will display the title of the hotspot in the middle of the green bar above the image…

OK! I think you now have a clear idea of what I am looking for.

Could anyone help me to find that script, please?

Thanks in advance!

to post a comment

JavaScript

6 Comments(s) _↴

@TheBearMayJan 02.2006 — #Give the area you want the text to appear in and then use some like:

...onmouseover="document.getElementById('textAreaId').innerHTML='some random text'" onmouseout="document.getElementById('textAreaId').innerHTML=''"...

The color, font size, etc can be set by changing the element's style, ie:

<i>
 </i>&lt;td style="color:red;"&gt;...

@chem3authorJan 02.2006 — #OK! As I mentioned before, I am still a beginner at this field, so I am not good at editing scripts (also not that much with HTML codes - Still learning), so could you please show me where and how to insert the script (code) in my html page?

Here's the page's source:

[CODE]<html>
 
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>Image</title>
 </head>
 
 <body>
 
 <map name="Map" id="Map">
 <area shape="rect" coords="0,0,100,133" href="http://www.google.com/" title="[COLOR=Red]Description (title): Google[/COLOR]"/>
 <area shape="rect" coords="101,0,200,133" href="http://www.yahoo.com/" title="[COLOR=Red]Yahoo! - Click Here[/COLOR]"/>
 <area shape="rect" coords="201,0,300,133" href="http://www.msn.com/" title="[COLOR=Red]MSN - Click Here[/COLOR]"/>
 <area shape="rect" coords="301,0,395,133" href="http://www.ebay.com/" title="[COLOR=Red]eBay auctions[/COLOR]"/>
 <area shape="rect" coords="0,133,100,266" href="http://www.aol.com/" title="[COLOR=Red]AOL.com[/COLOR]"/>
 <area shape="rect" coords="101,133,200,266" href="http://www.download.com/" title="[COLOR=Red]Download.com[/COLOR]"/>
 <area shape="rect" coords="201,133,300,266" href="http://www.cnn.com/" title="[COLOR=Red]CNN News[/COLOR]"/>
 <area shape="rect" coords="301,133,395,266" href="http://www.abc.com/" title="[COLOR=Red]ABC[/COLOR]"/>
 </map>
 
 <TABLE id=table1 dir=ltr cellSpacing=0 cellPadding=0 width="397" border=1>
 <TBODY>
 <TR>
 <TD>
 <IMG height=27 src="http://chem3.jeeran.com/r1.jpg" width=100 
 border=0></TD>
 [COLOR=DarkGreen]<TD vAlign=bottom width="297" background="http://chem3.jeeran.com/bg.jpg">
 </TD>[/COLOR]    </TR></TBODY></TABLE>
 <TABLE style="border-collapse:collapse;" class=tborder cellSpacing=0 cellPadding=0 width="395">
 <THEAD></THEAD>
 <TBODY id=collapseobj_beebi_ehdaa><FONT size=2 face="Tahoma">
 <TR>
 <TD class=alt1 height="266"><FONT size=2 face="Tahoma">
 <IMG height=266 src="http://chem3.jeeran.com/Tree.jpg" width=395 border=1 usemap="#Map">
 </FONT></TD></TR></TBODY></TABLE>
 
 </body>
 
 </html>[/CODE]

I want the title of each hotspot (titles are in red above) to appear at the center of the [COLOR=DarkGreen]green bar[/COLOR].

Could you please insert the script on the html page above?

Thanks!

@TheBearMayJan 02.2006 — #The code goes in the <area...> tag.

@chem3authorJan 03.2006 — #

...onmouseover="document.getElementById('textAreaId').innerHTML='some random text'" onmouseout="document.getElementById('textAreaId').innerHTML=''"...

[/QUOTE]

OK! Is there any way to make it use the area [B]title[/B] instead of inserting it as [COLOR=Red]some random text[/COLOR] in the following code:

[CODE]innerHTML='[COLOR=Red]some random text[/COLOR]'[/CODE]

I want it to use the area title instead of [COLOR=Red]some random text[/COLOR]

How to do that?

@TheBearMayJan 03.2006 — #Replace 'some random text' with this.title

@chem3authorJan 03.2006 — #Thanks a lot TheBearMay!

Also in #JavaScript _↴

jquery.fn.validate to work with from by form name NOT just FORM (specific)Dynamically update the URL of the Object Element for HTML content Adding two textboxes

Success!

Help @chem3 spread the word by sharing this article on Twitter...

Tweet This

script needed…

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

script needed…

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴