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 Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Map and hotspots

Status
Not open for further replies.
ozi2

ozi2

Programmer
Joined
Sep 1, 2002
Messages
40
Location
IL
Hi all

I have a picture in my page with hotspots on the sides of it.
In the middle of the picture I planted img tag, and everytime I move over a hotspot, the src property of the img tag is changed.
This works fine for all hotspots except for 2 hotspots from one side of the picture map. I don't know why particullary on this side.
I noticed that the image is in the same height as these 2.
If I move the img down the 2 hotspots work. But I can't do this.
(I used <div style=&quot;position:relative;left:;55%;top:40%&quot;> to
add the img tag.)

Any Idea?

Thanks,
Offir
 
Sort by date Sort by votes
Please can you post your code so we can get a clearer idea. Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Upvote 0 Downvote
Sure.
Something like this...


<html>

<head>
<META HTTP-EQUIV=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1255&quot;>
<meta name=&quot;GENERATOR&quot; content=&quot;Microsoft FrontPage 4.0&quot;>
<meta name=&quot;ProgId&quot; content=&quot;FrontPage.Editor.Document&quot;>
<title>New Page 1</title>

<script language=javascript DEFER>
var x;

function ShowOved1(ovdName,ovdDesc,imgSrc)
{
document.all(&quot;imgOved&quot;).src=imgSrc;
ovedName.innerHTML=ovdName;
ovedDesc.innerHTML=ovdDesc;
document.all(&quot;divOved&quot;).style.display=&quot;&quot;;

}


function HideOved()
{
document.all(&quot;divOved&quot;).style.display=&quot;none&quot;;

}

</script>

</head>

<body bgColor=#e7efef onLoad=&quot;HideOved()&quot;>
<p align=&quot;center&quot;>
<font color=blue size=+3>HR Units</blue><br>
<div style=&quot;position:absolute;&quot; id=&quot;divmap&quot;>
<map name=&quot;FPMap0&quot;>
<area href=&quot; shape=&quot;rect&quot; coords=&quot;567, 127, 624, 148&quot; onMouseOver=&quot;ShowOved1('temp1','','Mivne_Images/image/Iraelc.gif')&quot; onMouseOut=&quot;HideOved()&quot;><!--Israelc.gif-->
<area href=&quot; shape=&quot;rect&quot; coords=&quot;568, 166, 623, 184&quot; onMouseOver=&quot;ShowOved1('temp2','name2','Mivne_Images/image/ofra.jpg')&quot; onMouseOut=&quot;HideOved()&quot;><!--ofra.jpg-->
<area href=&quot; shape=&quot;rect&quot; coords=&quot;570, 200, 624, 221&quot; onMouseOver=&quot;ShowOved1('temp3','name3','Mivne_Images/image/blonder.jpg')&quot; onMouseOut=&quot;HideOved
<area href=&quot; shape=&quot;rect&quot; coords=&quot;575, 237, 620, 255&quot; onMouseOver=&quot;ShowOved1('temp4','name4','Mivne_Images/image/SHERF.jpg')&quot; onMouseOut=&quot;HideOved()&quot; >
<area name=&quot;sth&quot; href=&quot; shape=&quot;rect&quot; coords=&quot;568, 273, 625, 294&quot; onMouseOver=&quot;ShowOved1('temp5','name5','Mivne_Images/image/MOSHE.jpg')&quot; onMouseOut=&quot;HideOved()&quot;>
<area href=&quot; shape=&quot;rect&quot; coords=&quot;376, 163, 430, 174&quot; onMouseOver=&quot;ShowOved1('temp7','name7','Mivne_Images/image/shilo.jpg')&quot; onMouseOut=&quot;HideOved()&quot;>
<area href=&quot;http.... coords=&quot;569, 336, 622, 342&quot;>
<area href=&quot;http... shape=&quot;rect&quot; coords=&quot;555, 346, 625, 353&quot;>
<area href=&quot;http... shape=&quot;rect&quot; coords=&quot;538, 357, 627, 366&quot;>
<area href=&quot;http... onMouseOut=&quot;HideOved()&quot;>
.......

</map><img src=&quot;MIVNE1.jpg&quot; usemap=&quot;#FPMap0&quot; width=&quot;646&quot; height=&quot;380&quot; >
</div>
<div style=&quot;position:relative; top:45%; left:55%; padding:5&quot; id=&quot;divOved&quot; >

<img src=&quot;&quot; name=&quot;imgOved&quot; id=&quot;imgOved&quot; width=&quot;90&quot; height=&quot;100&quot;></img>
<br>

<b>
<font size=&quot;3&quot; color=&quot;red&quot; id=&quot;ovedName&quot; name=&quot;ovedName&quot;></font>
<br>
<font size=&quot;3&quot; color=&quot;red&quot; id=&quot;ovedDesc&quot; name=&quot;ovedDesc&quot;></font>
</b>

</div>

</p>
</body>

</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
540
lmcate
lmcate
PeDa
  • Locked
  • Question Question
Horizontal rule and CSS problem
Replies
2
Views
1K
PeDa
PeDa
jason.lex
  • Locked
  • Question Question
Bootstrap grid and columns question
Replies
0
Views
307
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top