www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image Swap on an Image Map?

Hybrid View

  1. #1
    Join Date
    Jan 2012
    Posts
    2

    Angry Image Swap on an Image Map?

    This is where I am trying to make this work.

    On the top of the page, I have an image that is the title of my website and the page links, and I used image maps for the links (obviously). However, I want to make it so that when someone's mouse is over a map (or the link), the link highlights in red. (see the difference between the original image and the highlighted image).

    However, I have used many Javascript codes and it doesn't seem like it wants to work. Any help? Thanks!

    Here is my code:

    <div id="Title and Pages" class="container"><img src="images/title.png" width="1001" height="232" usemap="#Map">
    <map name="Map" id="Map">
    <area shape="rect" coords="602,173,747,220" href="../shop" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/shop.png',1)">
    <area shape="rect" coords="40,176,177,219" href="../" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/news.png',1)">
    <area shape="rect" coords="216,169,367,218" href="../music" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/music.png',1)">
    <area shape="rect" coords="779,175,967,219" href="../contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/contact.png',1)">
    <area shape="rect" coords="400,164,574,225" href="../photos" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/photos.png',1)">
    </map></div>

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there guitarcrazy23,

    and a warm welcome to these forums.

    This could be better done without an image map and javascript but with CSS.

    If that method would be of interest to you let me know and I will code it for you.

    In the meantime here is a javascript solution...
    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://wyteboyz.com//">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>Wyte Boyz</title>
    
    <style type="text/css">
    body {
        margin:0;
        background-color:#000;
        background-image:url(images/background.png);
        background-repeat:no-repeat;
        background-position:-80px -9px;
        background-attachment:fixed;
     }
    #container {
        width:1000px;
        margin:0 auto;
     }
    #container img {
        display:block;
        width:1000px;
        height:232px;
        border:0;
     } 
    </style>
    
    <script type="text/javascript">
       var preloads=[];
    
    function preload(){
    
    for(var i=0;i<arguments.length;i++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[i];
      }
     }
    preload('images/news.png','images/music.png','images/photos.png','images/shop.png','images/contact.png');
    
    function init(){
       var ar=document.getElementById('container').getElementsByTagName('area');
    for(var c=0;c<ar.length;c++) {
       ar[c].number=c;
    ar[c].onmouseover=function() {
       document.getElementById('title').src=preloads[this.number].src;
    this.onmouseout=function() {
       document.getElementById('title').src='images/title.png';
        }
       }
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <img id="title" src="images/title.png" usemap="#map" alt="">
    <map name="map" id="map">
     <area shape="rect" coords="40,176,177,219" href="../" alt="">
     <area shape="rect" coords="216,169,367,218" href="../music" alt="">
     <area shape="rect" coords="400,164,574,225" href="../photos" alt="">
     <area shape="rect" coords="602,173,747,220" href="../shop" alt="">
     <area shape="rect" coords="779,175,967,219" href="../contact" alt="">
    </map>
    
    </div><!-- end #container --> 
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there guitarcrazy23,

    I had a little spare time, so coded a CSS navigation for you to try.

    Check out the attachment to see the result.

    coothead
    Attached Files Attached Files

  4. #4
    Join Date
    Jan 2012
    Posts
    2

    Thanks so much!!!! All the help is greatly appreciated :D

    You can see your help in action here!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles