Log in

View Full Version : Facebox from an image hotspot


cpn
03-06-2011, 11:03 AM
1) Script Title: Facebox image and content viewer (v 1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

3) Describe problem: I got this to work fine, linking to an external file, both from text and from an image. But I would really like to link from a hotspot on an image. How please?
azoomer
03-06-2011, 05:47 PM
Experimenting a bit and I found this to be working:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Facebox Demo</title>
<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facefiles/facebox.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

</head>
<body>


<img src="myimage.jpg" alt="myimage" width="500" height="500" border="0" usemap="#Map" />

<a href="#mydiv" rel="facebox">
<map name="Map" id="Map"><area shape="circle" coords="277,92,17" href="#" alt="hotspot" />
</map>
</a>

<div id="mydiv" style="display:none">
This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none"<br /><br />
<a href="http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm">Facebox image and content viewer (v 1.1)</a>
</div>


</body>
</html>
This is just an example with a circular hotspot.
cpn
03-07-2011, 09:32 AM
Thanks for this. I won't get chance to try it out for a few days maybe. Will let you know how I get on :)
cpn
03-08-2011, 09:55 AM
Wonderful, that works a treat!

but then I tried to link from a second hotspot on the same image to a different external file, and no joy.

Is this possible?

(sorry for being dim)
cpn
03-08-2011, 10:58 AM
I'd also like the external files to pop up in the facebox on hover rather than on click. Possible?
azoomer
03-09-2011, 08:55 PM
Hi cpn, I found a way to use facebox with several hotspots in one image.
The solution was in this thread (http://www.dynamicdrive.com/forums/showthread.php?t=41571).
Here is the code I'm using:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Facebox Demo</title>
<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facefiles/facebox.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

</head>
<body>

<img src="serpent2.png" alt="serpent" width="500" height="500" border="0" usemap="#Map" />

<map name="Map" id="Map">
<area shape="circle" coords="277,92,17" href="#mydiv" alt="button1" onclick="jQuery('#proxy').attr('href', this.href).click();return false;" />
<area shape="circle" coords="232,199,14" href="#myotherdiv" alt="button2" onclick="jQuery('#proxy').attr('href', this.href).click();return false;" />
<area shape="circle" coords="222,279,16" href="#mythirddiv" alt="button3" onclick="jQuery('#proxy').attr('href', this.href).click();return false;" />
</map>

<div id="mydiv" style="display:none">
This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none"<br /><br />
<a href="http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm">Facebox image and content viewer (v 1.1)</a>
</div>
<div id="myotherdiv" style="display:none">
This is the contents of my other hidden DIV on the page, with ID="myotherdiv" and style set to "display:none"<br /><br />
<a href="http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm">Facebox image and content viewer (v 1.1)</a>
</div>
<div id="mythirddiv" style="display:none">
This is the contents of my third hidden DIV on the page, with ID="mythirddiv" and style set to "display:none"<br /><br />
<a href="http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm">Facebox image and content viewer (v 1.1)</a>
</div>

<a id="proxy" rel="facebox" style="display:none;"></a>

</body>
</html>
By now I have not found a way to make it appear on hover.
edit. Ok It seems that it works on hover if I just replace onclick with onmouseover
cpn
03-10-2011, 05:20 PM
Excellent stuff!!!

you don't know how useful this is to me :) Thank you