Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Skype Button as Hot Spot on Image Map

    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

    Code:
    <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>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,702
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there JeremySchubert,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!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

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

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

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,702
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there JeremySchubert,

    use these value to put the links above the copyright text...
    Code:
    
    #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...
    Code:
    
        width:750px;
        height:603px;
    
    ...are the image map img dimensions.

    coothead

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,702
    Thanks
    0
    Thanked 233 Times in 228 Posts
    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.

    IE9 has "developer tools" built in to the browser and it can also supply image information.
    What is the purpose of...
    Code:
    
    <!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...

    ...may be a good place to start.

    coothead

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great resources. Thanks again for all your help and suggestions.
    Jeremy

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,702
    Thanks
    0
    Thanked 233 Times in 228 Posts
    No problem, you're very welcome.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •