PDA

View Full Version : Hotspots IE versus Firefox


K.Simmonds
12-21-2007, 09:33 PM
Hi. I have done a photo of the cast of a TV show, and I've used hotspots to identify the characters and actors. It only works in IE. Is there a way of getting the same thing to work in Firefox ???
This is the page i'm talking about : http://www.glendalehouse.co.uk/pages/aidensfield.htm

Cary
12-22-2007, 12:55 AM
You want to use the title attribute rather than the alt attribute to achieve that effect.

K.Simmonds
12-22-2007, 07:40 AM
Excellent ............. but I'm thick. How do I do that?
Another thought, is there some sort of pop up box I could use that would work in both ie and Firefox?

Cary
12-22-2007, 08:11 AM
You need to find this code in your page:

<map name="Map2Map">
<area shape="circle" coords="88,87,25" href="#" alt="PC Geoff Younger (Steven Blakeley)">
<area shape="circle" coords="154,86,26" href="#" alt="Bernie Scripps (Peter Benson)">
<area shape="circle" coords="78,194,30" href="#" alt="Alf Ventress (Bill Simons)">
<area shape="circle" coords="166,165,28" href="#" alt="Lord Ashfordly (Rupert Vansittart)">
<area shape="circle" coords="280,110,27" href="#" alt="Gina Ward/Bellamy (Tricia Penrose)">
<area shape="circle" coords="340,74,32" href="#" alt="PC Joe Mason (Joe McFadden)">
<area shape="circle" coords="199,226,39" href="#" alt="David Stockwell (David Lonsdale)">
<area shape="circle" coords="446,81,34" href="#" alt="Oscar Blaketon (Derek Fowldes)">
<area shape="circle" coords="407,176,36" href="#" alt="Peggy Armstrong (Gwen Taylor)">
<area shape="circle" coords="557,83,37" href="#" alt="Sgt. Miller (John Duttine)">
<area shape="circle" coords="792,74,39" href="#" alt="DC Rachel Dawson (Clare Willie)">
<area shape="circle" coords="672,59,36" href="#" alt="PC Don Wetherby (Rupert Ward-Lewis)">
<area shape="circle" coords="692,187,40" href="#" alt="Nurse Carol Cassidy (Lisa Kay)">
<area shape="circle" coords="86,83,1" href="#" alt="PC Geoff Younger (Steven Blakeley)">
</map>

So where you have this, for instance...
<area shape="circle" coords="88,87,25" href="#" alt="PC Geoff Younger (Steven Blakeley)">

...you change to this...
<area shape="circle" coords="88,87,25" href="#" alt="" title="PC Geoff Younger (Steven Blakeley)">

K.Simmonds
12-22-2007, 02:33 PM
Brilliant ..... I've done that - and it all works fine in both browsers. I searched the Help in Dreamweaver, and my book, but couldn't find it at all, but I followed your instructions .... and bingo !

Thanks again

domedia
12-22-2007, 05:51 PM
Since these are not really links (href="#"), Cary do you know of another technique to achieve the same tooltip effect on separate areas of an image?
I think Facebook and Flickr are doing this

d a v e
12-22-2007, 07:01 PM
how about if you positioned a layer sized the correct size - like a hotspot - and then just the title attribute on that? could be tricky...

Cary
12-22-2007, 07:42 PM
I can only think of something along the same lines as Dave suggested.

Cary
01-04-2008, 02:48 AM
Since these are not really links (href="#"), Cary do you know of another technique to achieve the same tooltip effect on separate areas of an image?

This is the code for a test page I did which seemed to work okay. It uses styling on a list to create the effect.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!-- IE 6 requires csshover.htc, available from http://www.xs4all.nl/~peterned/csshover.html -->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->
<style type="text/css">
<!--
#cast {
background: url(Heartbeat-cast-2008.jpg); /* This test was with an 856px by 610px image */
margin: 0 auto;
padding: 0;
height: 610px;
width: 856px;
list-style: none;
position: relative;
}
#cast li {
position:absolute;
height: 0; /* Zero height and hidden overflow make text dissappear. */
padding: 50px 0 0; /* Top padding leaves the mouse something to hover over */
overflow: hidden;
text-align: center;
font-weight: bold;
color: #000000;
}
#cast li:hover {
background-color:#CCCCCC;
height: auto; /* Height restored to normal so text is visible */
padding: 5px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#cast span {
display: block;
font-size: 85%;
font-weight: normal;
}
#sb {
left: 11px;
top: 67px;
}

#pb {
left: 105px;
top: 62px;
}
#bs {
left: 31px;
top: 179px;
}
#rv {
left: 117px;
top: 156px;
}
#tp {
left: 214px;
top: 92px;
}
#jm {
left: 282px;
top: 45px;
}
#dl {
left: 140px;
top: 211px;
}
#df {
left: 396px;
top: 59px;
}
#gt {
left: 350px;
top: 159px;
}
#jd {
left: 520px;
top: 61px;
}
#cw {
left: 741px;
top: 55px;
}
#rwl {
left: 610px;
top: 38px;
}
#lk {
left: 623px;
top: 170px;
}
#dog {
left: 217px;
top: 373px;
}
-->
</style>
</head>
<body>
<ul id="cast">
<li id="sb">PC Geoff Younger <span>(Steven Blakeley)</span></li>
<li id="pb">Bernie Scripps <span>(Peter Benson)</span></li>
<li id="bs">Alf Ventress <span>(Bill Simons)</span></li>
<li id="rv">Lord Ashfordly <span>(Rupert Vansittart)</span></li>
<li id="tp">Gina Ward/Bellamy <span>(Tricia Penrose)</span></li>
<li id="jm">PC Joe Mason <span>(Joe McFadden)</span></li>
<li id="dl">David Stockwell <span>(David Lonsdale)</span></li>
<li id="df">Oscar Blaketon <span>(Derek Fowldes)</span></li>
<li id="gt">Peggy Armstrong <span>(Gwen Taylor)</span></li>
<li id="jd">Sgt. Miller <span>(John Duttine)</span></li>
<li id="cw">DC Rachel Dawson <span>(Clare Willie)</span></li>
<li id="rwl">PC Don Wetherby <span>(Rupert Ward-Lewis)</span></li>
<li id="lk">Nurse Carol Cassidy <span>(Lisa Kay)</span></li>
<li id="dog">Dog</li>
</ul>
</body>
</html>