Getting it to work and linking to hotspots

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Getting it to work and linking to hotspots

hunterjo2
Hi Folks,

I am VERY new to shadowbox and I am trying to do 2 things.

1 - Make sure I have the setup right - is there a simple directory structure I should follow.

2 - Linking to Dreamweaver hotspots. - Is this possible and can someone tell me how to do it.

This is the page....

http://www.cuelk.com/newsite/profiles2.html

This is the source code

<html>
<head>
<title>Cuelk Profiles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript" src="shadow/src/shadowbox-base.js"></script><script type="text/javascript" src="shadow/src/shadowbox.js"></script><script type="text/javascript"> Shadowbox.loadSkin('classic', 'shadow/src/skin'); Shadowbox.loadLanguage('en', 'shadow/src/lang'); Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'shadowbox/player'); window.onload = Shadowbox.init; </script>

<center>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


                         
                       


<map name="Map"><area shape="rect" coords="143,299,198,384" href="http://cuelk.bebo.com" rel="shadowbox>
<area shape="rect" coords="213,253,266,339" href="#" alt="Davy Dee">
<area shape="rect" coords="296,243,352,333" href="#" alt="Eddie">
<area shape="rect" coords="384,242,449,334" href="#" alt="Justice Junior">
<area shape="rect" coords="473,249,534,328" href="#" alt="Conor D">
<area shape="rect" coords="554,248,613,333" href="#" alt="Gavin">

<area shape="rect" coords="616,298,675,394" href="#" alt="Ciaran">
<area shape="rect" coords="207,363,266,444" href="#" alt="Bernard">
<area shape="rect" coords="290,364,355,442" href="#" alt="Chin">
<area shape="rect" coords="386,361,522,445" href="#" alt="House Arrest">
<area shape="rect" coords="550,362,596,433" href="#"></map></body></center>
</html>

The plan is that when they click on a head a full size pic would open up with the DJ's biog

Sorry but I really don't have a clue and I would love to get this working on this site.

Joe
Reply | Threaded
Open this post in threaded view
|

Re: Getting it to work and linking to hotspots

build
just quickly ... see:
http://www.web.build.id.au/shadowbox/index.php

image map examples

also look at using a compressed 'build'

Reply | Threaded
Open this post in threaded view
|

Re: Getting it to work and linking to hotspots

P.C.Surgeon
In reply to this post by hunterjo2
Here is the source code example to make this work for one or many hotspots on a page. Check out http://www.mobile-pc-repair.com for a working example.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script><script type="text/javascript"> Shadowbox.init({ players: ['iframe'] }); </script> 
<script type="text/javascript"> function loadPage1(){ Shadowbox.open({ player: 'iframe', content: 'http://www.your_web_address.com/page1.html', height: 480, width: 640, title: 'Directions' }); }; </script>
<script type="text/javascript"> function loadPage2(){ Shadowbox.open({ player: 'iframe', content: 'http://www.your_web_address.com/page2.html', height: 480, width: 640, title: 'Products' }); }; </script>
<script type="text/javascript"> function loadPage3(){ Shadowbox.open({ player: 'iframe', content: 'http://www.your_web_address.com/page3.html', height: 480, width: 640, title: 'Services' }); }; </script>
<script type="text/javascript"> function loadPage4(){ Shadowbox.open({ player: 'iframe', content: 'http://www.your_web_address.com/page4.html', height: 480, width: 640, title: 'Training Classes' }); }; </script></head>

<body>

<div align="center">

</div>

<map name="Map" id="Map">
        <area title="Page1" shape="rect" coords="54,50,140,72" href="#" onclick="loadPage1(); return false;" />
        <area title="Page2" shape="rect" coords="61,85,137,103" href="#" onclick="loadPage2(); return false;" />
        <area title="Page3" shape="rect" coords="67,120,131,137" href="#" onclick="loadPage3(); return false;" />
        <area title="Page4" shape="rect" coords="36,151,160,169" href="#" onclick="loadPage4(); return false;" />
</map>

</body>
</html>