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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question mouseover with image map help needed

    Here is the script I generated...

    The main image works, but no mouseovers or mouseout... the mouseout should be the main image again.

    I used an image map because i have 5 bracelets in one picture, all with different styles. I created the mouseover images so that when your mouse is over one of them, that bracelet will highlight and show the name of the style. But the mouseovers are not working at all.

    All the .gif have been uploaded into a sub folder named bracelets. I do not want and ALT tag or an onclick, an no link associated to each bracelet.

    Please help!

    <img src="PINLINKSSBRACELETS.gif" usemap="#PINLINKSSBRACELETS" alt="" style="border-style:none" />



    <map id="PINLINKSSBRACELETS" name="PINLINKSSBRACELETS">
    <area shape="rect" alt="" coords="148,79,226,536" nohref title="" onMouseOver="/bracelets/PINLINKpres.gif" onMouseOut="/bracelets/PINLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
    <area shape="rect" alt="" coords="238,60,322,537" nohref title="" onMouseOver="/bracelets/PINLINkjub.gif" />
    <area shape="rect" alt="" coords="338,22,422,536" nohref title="" onMouseOver="/bracelets/PINLINKstoyst.gif" onMouseOut="/bracelets/PINKLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
    <area shape="rect" alt="" coords="440,18,524,536" nohref title="" onMouseOver="/bracelets/PINLINKcvoyst.gif" onMouseOut="/bracelets/PINLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
    <area shape="rect" alt="" coords="538,45,631,536" nohref title="" onMouseOver="/bracelets/PINLINKbreit.gif" onMouseOut="/bracelets/PINLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
    <area shape="default" nohref="nohref" alt="" />
    </map>

  • #2
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is there NOONE that can help me with this?

    Please!

    It really is driving me crazy!

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    what do you mean by

    that bracelet will highlight and sh

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ok, here is what I mean

    I have a picture of 5 bracelets in it. I created 5 seperate images, each image highlights one of the bracelets, and shows the name of it on there. I want the main picture of the 5 bracelets to show the mouseover image when they move their mouse over each individual bracelet. I have the image map defining the coordinates for the mouseover, I have the mouse over images created and uploaded, but the mouseover does not work.

    What do I need to add, change or fix in my script above to get the mouseover image to work correctly for each bracelet in the image map?

    Hope that clarifies what I am trying to accomplish.

    Thanks,
    jrg0517

  • #5
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    Slicing the image up is much easier (and perhaps the only way?)

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Cant figure map coords or image sizes but

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    
    var sImg,MImg,VMImg;
    
    function HiLiteImage(obj,simg,mimg){
     sImg=document.getElementById('sub');
     MImg=document.getElementById('Main');
     VMImg=document.getElementById('ViewMain');
     sImg.src=ImgPath+simg;
     sImg.style.left=(zxcPos(MImg)[0]+parseInt(obj.coords.split(',')[0]))+'px';
     sImg.style.top=(zxcPos(MImg)[1]+parseInt(obj.coords.split(',')[1]))+'px';
     sImg.style.visibility='visible';
     sImg.main=mimg;
     sImg.onmouseout=function(){ this.style.visibility='hidden'; }
     sImg.onclick=function(){ VMImg.src=ImgPath+this.main; }
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    //-->
    </script></head>
    
    <body>
    
    <img id="Main" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" usemap="#PINLINKSSBRACELETS" alt="" style="border-style:none" width=650 height=550/>
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" id="ViewMain" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" id="sub" width=150 height=650 style="position:absolute;" >
    <map id="PINLINKSSBRACELETS" name="PINLINKSSBRACELETS">
    <area shape="rect" alt="" coords="148,79,226,536" nohref title="" onmouseover="HiLiteImage(this,'One.gif','One.gif');" >
    <area shape="rect" alt="" coords="238,60,322,537" nohref title="" onmouseover="HiLiteImage(this,'Two.gif','Two.gif');" />
    <area shape="rect" alt="" coords="338,22,422,536" nohref title="" onmouseover="HiLiteImage(this,'Three.gif','Three.gif');"  />
    <area shape="rect" alt="" coords="440,18,524,536" nohref title="" onmouseover="HiLiteImage(this,'Four.gif','Four.gif');" />
    <area shape="rect" alt="" coords="538,45,631,536" nohref title="" onmouseover="HiLiteImage(this,'Five.gif','Five.gif');" />
    <area shape="default" nohref="nohref" alt="" />
    </map>
    </body>
    
    </html>


  •  

    LinkBacks (?)

    1. 07-19-2014, 06:51 PM

    Posting Permissions

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