Skype Button as Hot Spot on Image Map

JeremySchubert

11-30-2011, 07:51 PM

Hi,

If this is not the correct forum, would someone please direct me to the correct forum.

I have pasted code below. On my splash page I have an image map with hot spots linking to various pages. In a separate section I have my javascript code for my Skype and Twitter buttons. How best can I embed my javascript code into my image map code to have my skype and twitter button show up on my image as hot spots rather than beneath my image?

Thanks, Jeremy

<html>

<!DOCTYPE html>

<head>

<title>Schubert School</title>

<style type="text/css">
body {background-image:url('images/04original.gif');}
</style>

</head>

<body>

<center>

<img border="0" src="/images/newsplashpage.png" alt="Schubert School" USEMAP="#Imagemap" />

<MAP NAME="Imagemap">
<AREA SHAPE=RECT COORDS="85,156,290,188" HREF="http://www.schubertschool.com/moodle21training/videogallery/">
<AREA SHAPE=RECT COORDS="361,156,609,182" HREF="http://www.schubertschool.com/moodlesoftware">
<AREA SHAPE=RECT COORDS="431,204,621,255" HREF="http://www.schubertschool.com/examples">
<AREA SHAPE=RECT COORDS="50,225,302,251" HREF="http://www.schubertschool.com/instructionaldesign">
<AREA SHAPE=RECT COORDS="510,306,652,337" HREF="http://www.schubertville.com" target=_blank">
</MAP>

<p>

<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:Jeremy.Schubert?call"><img src="http://mystatus.skype.com/balloon/Jeremy%2ESchubert" style="border: none;" width="150" height="60" alt="My status" /></a>
       
       
<a href="http://www.twitter.com/jrschubert"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-a.png" alt="Follow jrschubert on Twitter"/></a>

</body>
</html>

coothead

12-02-2011, 10:31 AM

Hi there JeremySchubert,

and a warm welcome to these forums. ;)

Try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.schubertschool.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Schubert School</title>

<style type="text/css">
body {
background-image:url('images/04original.gif');
}
#container {
position:relative;
width:750px;
height:603px;
margin:auto;
box-shadow:#434 20px 20px 40px;
}
#splash {
display:block;
border:0;
}
#call img {
position:absolute;
bottom:0;
left:0;
width:135px;
height:54px;
border:0;
}
#twit img {
position:absolute;
bottom:8px;
right:8px;
border:0;
}
</style>

<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>

</head>
<body>

<div id="container">

<img id="splash" src="images/newsplashpage.png" alt="Schubert School" usemap="#Imagemap" >

<map name="Imagemap" id="Imagemap">
<area shape="rect" coords="85,156,290,188" href="moodle21training/videogallery/" alt="">
<area shape="rect" coords="361,156,609,182" href="moodlesoftware" alt="">
<area shape="rect" coords="431,204,621,255" href="examples" alt="">
<area shape="rect" coords="50,225,302,251" href="instructionaldesign" alt="">
<area shape="rect" coords="510,306,652,337" href="#" alt="">
</map>

<a id="call" href="skype:Jeremy.Schubert?call">
<img src="http://mystatus.skype.com/balloon/Jeremy%2ESchubert" alt="My status">
</a>
<a id="twit" href="http://www.twitter.com/jrschubert">
<img src="http://twitter-badges.s3.amazonaws.com/follow_me-a.png" alt="Follow jrschubert on Twitter">
</a>

</div>

</body>
</html>

coothead

JeremySchubert

12-02-2011, 06:05 PM

Coothead, brilliant, thank you! Works great.
Now I'm trying to edit your code a bit so I can reposition the twitter and skype buttons. I'd like them above the copyrite message instead of below. To help me, can you please explain how you determined the width and height pixels from the following section of your code?

#container {
position:relative;
width:750px;
height:603px;
margin:auto;
box-shadow:#434 20px 20px 40px;

coothead

12-02-2011, 06:18 PM

Hi there JeremySchubert,

use these value to put the links above the copyright text...

#call img {
position:absolute;
bottom:102px;
left:0;
width:135px;
height:54px;
border:0;
}
#twit img {
position:absolute;
bottom:110px;
right:8px;
border:0;
}

These values...

width:750px;
height:603px;

...are the image map img dimensions. ;)

coothead

JeremySchubert

12-03-2011, 01:34 AM

Got it, thanks again.

What method did you use to determine the image map dimensions?
What is the purpose of the bit below (what does it tell the browser)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

coothead

12-03-2011, 11:26 AM

Hi there JeremySchubert,
What method did you use to determine the image map dimensions?
I used the Firefox "Web Developer" add-on, which, among other things, gives information about images.
The Firefox "Firebug" add-on, is also excellent for this purpose.

Web Developer 1.1.9 by Chris Pederick (https://addons.mozilla.org/en-US/firefox/addon/60)
Firebug 1.8.4 by Joe Hewitt, et al (https://addons.mozilla.org/en-US/firefox/addon/firebug/?src=ss)

IE9 has "developer tools" built in to the browser and it can also supply image information.
What is the purpose of...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

...what does it tell the browser?
Simply put, the doctype declaration tells the browser how to render the content.
A "Google search" will give you greater in-depth information, but the following article...
Doctypes (http://reference.sitepoint.com/html/doctypes)
...may be a good place to start.

coothead

JeremySchubert

12-03-2011, 06:00 PM

Great resources. Thanks again for all your help and suggestions.
Jeremy

coothead

12-03-2011, 06:07 PM

No problem, you're very welcome. ;)