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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to change a link destination via a mouseover??

    What I have:

    1. A table containing an image that gets swapped out when the user mouseovers various preview images
    Code:
    <table>
      <tr>
        <td><img src="images/image1.jpg" name="target" id="target"></td>
        </tr>
      </tr>
    </table>
    2. A link that causes the target image in the table above to change image.
    The link also opens a window with a larger version of the image.
    Code:
    <a href="javascript:;" 
      onmouseover="MM_swapImage('target','','images/image2.jpg',1)" 
      onclick="openPictureWindow('jpg','images/image2.jpg',660,440,'image2','0','0')">
      <IMG id=1s  src="images/image2.jpg" name=1s>
    </a>
    3. The code for doing the swap.
    Code:
    function MM_swapImgRestore() { //v3.0
      var g,x,a=document.MM_sr; for(g=0;a&&g<a.length&&(x=a[g])&&x.oSrc;g++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var g,j=d.MM_p.length,a=MM_preloadImages.arguments; for(g=0; g<a.length; g++)
        if (a[g].indexOf("#")!=0){ d.MM_p[g]=new Image; d.MM_p[g++].src=a[g];}}
    }
    
    function MM_findObj(n, d) { //v3.0
      var p,g,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (g=0;!x&&g<d.forms.length;g++) x=d.forms[g][n];
      for(g=0;!x&&d.layers&&g<d.layers.length;g++) x=MM_findObj(n,d.layers[g].document); return x;
    }
    
    function MM_swapImage() { //v3.0
      var g,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(g=0;g<(a.length-2);g+=3)
       if ((x=MM_findObj(a[g]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[g+2];}
    }
    4. The code for opening the window with the larger version of the image.
    Code:
    function openPictureWindow(imageType,imageName,imageWidth,imageHeight,alt,posLeft,posTop) 
    {
    	newWindow = window.open("","newWindow","width="+imageWidth+",height="+(imageHeight+56)+",scrollbars=no,left="+(posLeft+240)+",top="+(posTop+120)); 
    	newWindow.document.open();
    	newWindow.document.write('<html>\n<title>'+alt+'</title>\n'); 
    	newWindow.document.write('<body bgcolor="#000000" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">\n'); 
    	newWindow.document.write('<div align="center">\n'); 
    	newWindow.document.write('<table width='+imageWidth+' height='+(imageHeight+56)+'>\n'); 
    	newWindow.document.write('<tr>\n<td align="center valign="top"">');
        	newWindow.document.write('<img src=\"'+imageName+'\" width='+imageWidth+' height='+imageHeight+' alt=\"'+alt+'\">\n');
        	newWindow.document.write('</td>\n</tr>\n');
        	newWindow.document.write('</table>\n</div>\n');
    	newWindow.document.write('</body>\n</html>\n');
    	newWindow.document.close();
    	newWindow.focus();
    
    }

    What I want to do:
    1. make the currently viewed target image in the table at the top linkable to open a page (hopefully using the same openPictureWindow script as is in the image2 link) that contains the currently viewed image, i.e.- image2.

    2. make a completely separate image also linkable to open a page (hopefully using the same openPictureWindow script as is in the image2 link) that contains the currently viewed image, i.e.- image2. They key here is that I don't want to change this image, just the way it links.


    How do I do this?!?
    TIA!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    oh... not those Mikey Mouse codes again!. The codes generated by any application (and Macromedia's mainly) are impossible to be followed, intricate, repeatable and, sometimes, even incorrect.

    If you want really to enter this brach, learn and build your javascript codes alone. By hand.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. so ignore the code I have. I only provided it in case someone needed the background info about what I currenlty have going on.

    The issue still remains this:
    How do I make the href of a link change based on the mouseover of a different object?

    i.e.
    object 1: links to page1.htm
    object 2: links to page2.htm

    Action:
    User rolls over object2
    User can now click on EITHER object 1 OR object 2 and still get to page2.htm

    The end result being that if there are 7 objects, the user can rollover and click on any of the objects and get to the respective page. AND after the user rolls over any of these objects, clicking on object 1 will take the user to the page associated with the last mouseovered object.

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

    obviously this cannot be done with onmouseover as you can only click the image that you mouseover.
    So it will have to be done using onmouseout.
    have a look at this working example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>mouseout href change</title>
    <base href="http://coothead.homestead.com/files/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    
    <style type="text/css">
    <!--
    body {
         background-color:#999;
     }
    #container {
         width:732px !important;
         width:736px;
         height:572px;
         padding:2px;
         background-color:#ddd;
         border:3px double #000;
         margin:auto;
     }
    #container img {
         display:block;
         float:left;
         border:1px solid #000;
         margin:2px;
     }
    #info, h5 {
        text-align:center;
     }  
    #info input {
         width:200px;
    }   
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function swapHref(n) {
    var urls=new Array();
          urls[0]='http://www.codingforums.com';
          urls[1]='http://www.google.com';
          urls[2]='http://www.yahoo.com';
          urls[3]='http://www.w3schools.com';
    var anc=document.getElementsByTagName('a');
    
    for(i=0;i<anc.length;i++) {
    if(anc[i].className=='link') {
       anc[i].href=urls[n];
       document.forms[0][0].value=urls[n];
    }
    }
     }
    
    //-->
    </script>
    
    </head>
    <body onload="document.forms[0][0].value='http://www.codingforums.com'">
    
    <h5>this is the link to which a click - on any image - will send you</h5>
    
    <form action="#">
    <div id="info">
    <input type="text"/>
    </div>
    </form>
    
    <div id="container">
    <a class="link" href="http://www.codingforums.com" onmouseout="swapHref(0)">
    <img src="apple0.jpg" alt=""/>
    </a>
    <a class="link" href="http://www.codingforums.com" onmouseout="swapHref(1)">
    <img src="apple1.jpg" alt=""/>
    </a>
    <a class="link" href="http://www.codingforums.com" onmouseout="swapHref(2)">
    <img src="apple2.jpg" alt=""/>
    </a>
    <a class="link" href="http://www.codingforums.com" onmouseout="swapHref(3)">
    <img src="apple3.jpg" alt=""/>
    </a>
    </div>
    
    </body>
    </html>
    Note:- the form input has only been added so that you can check the urls and can be removed, as can the highlighted line in the script.
    Edit: reason for edit:- error in form handling


    coothead
    Last edited by coothead; 10-22-2005 at 03:50 PM.

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for your help coothead! It's very much appreciated!

    I think we're really close here. However, I don't want to change the actual link of each apple. I want to change the link of a separate apple.

    Check out this working example...
    ...it's point ii. in this example that I don't know how to make happen.

    ... what i need is a function 'readHref' that reads the value of the urls from swapHref. the function will be called from an onmouseover AND/OR onmousedown for the a tag around the large apple image so that its href is equal to the last mouseovered apple.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>mouseout href change</title>
    
    <base href="http://coothead.homestead.com/files/"/>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    
    <style type="text/css">
    <!--
    body {
         background-color:#999;
     }
    #container {
         width:732px !important;
         width:736px;
         height:572px;
         padding:2px;
         background-color:#ddd;
         border:3px double #000;
         margin:auto;
     }
    #container img {
         display:block;
         float:left;
         border:1px solid #000;
         margin:2px;
     }
    #info, h5 {
        text-align:center;
     }  
    #info input {
         width:200px;
    }   
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function swapHref(n) {
    var urls=new Array();
          urls[0]='apple0.jpg';
          urls[1]='apple1.jpg';
          urls[2]='apple2.jpg';
          urls[3]='apple3.jpg';
    var anc=document.getElementsByTagName('a');
    
    for(i=0;i<anc.length;i++) {
    if(anc[i].className=='link') {
       anc[i].href=urls[n];
       document.forms[0][0].value=urls[n];
    }
    }
     }
    
    //-->
    </script>
    
    <!--Start of script that reads the value of the urls from swapHref-->
    <script type="text/javascript">
    <!--
    function readHref(n) {
    
     }
    
    //-->
    </script>
    <!--End of script that reads the value of the url from swapHref-->
    
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v3.0
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    
    </head>
    <body>
    
    <!--Start of visual aid-->
    <h5>this is the link to which a click - on the <span style="font-weight: 400">LARGE</span> apple image - will send you</h5>
    <form action="#">
      <div id="info">
        <input type="text" value="apple0.jpg" size="20"/>
      </div>
    </form>
    <!--End of visual aid-->
    
    <br><br>
    <div align="left">
      <table border="0" cellpadding="0" cellspacing="0" width="600" height="50">
        <tr>
          <td>This apple should reflect <font size="3"><b><u>TWO</u></b> things,</font>
            <ol type="i">
              <li>it should show the image of the apple that IS BEING or HAS JUST BEEN moused over</li>
              <li>it should link to the apple that HAS JUST BEEN moused over</li>
          </ol>
          </td>
        </tr>
      </table>
    </div>
    
    <!--Image that changes appearance AND its link value-->
    <p align="left">
    
    <!--**** what i need here is an onmouseover AND/OR onmousedown function readHref that reads the value of the urls from swapHref and uses it for the href value****-->
      <a href="apple0.jpg" target="_blank">
        <img src="apple0.jpg" alt="" border="0" width="360" height="280" name="target" id="target"/>
      </a>
    </p>
    <!--End of Image that changes appearance AND its link value-->
    
    <br><br>
    
    <!--Start rollover links-->
    <p align="left">
      <a class="link" href="apple0.jpg" target="_blank"
        onmouseout="swapHref(0)" 
        onmouseover="MM_swapImage('target','','apple0.jpg',1)"><img src="apple0.jpg" width="84" height="66"/></a>
      <a class="link" href="http://coothead.homestead.com/files/apple1.jpg" target="_blank" 
        onmouseout="swapHref(1)"
        onmouseover="MM_swapImage('target','','apple1.jpg',1)"><img src="apple1.jpg" width="84" height="66"/></a>
      <a class="link" href="http://coothead.homestead.com/files/apple2.jpg" target="_blank" 
        onmouseout="swapHref(2)"
        onmouseover="MM_swapImage('target','','apple2.jpg',1)"><img src="apple2.jpg" width="84" height="66"/></a>
      <a class="link" href="http://coothead.homestead.com/files/apple3.jpg" target="_blank" 
        onmouseout="swapHref(3)"
        onmouseover="MM_swapImage('target','','apple3.jpg',1)"><img src="apple3.jpg" width="84" height="66"/></a>
    </p>
    <!--End rollover links-->
    
    </body>
    </html>

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,744
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there lllusion,

    well, this is much simpler and can be achieved with onmouseover.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>mouseout href change</title>
    <base href="http://coothead.homestead.com/files/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    
    <style type="text/css">
    <!--
    body {
         background-color:#999;
     }
    #link {   
         width:362px;
         height:282px;
         padding:4px;
         background-color:#ddd;
         border:3px double #000;  
         margin:10px auto;
     }
    #link img{
         display:block;
         width:360px;
         height:280px;
         border:1px solid #000;
     }   
    #container {
         width:1098px;
         height:286px;
         padding:2px;
         background-color:#ddd;
         border:3px double #000;
         margin:auto;
     }
    #container img {
         float:left;
         border:1px solid #000;
         margin:2px;
     }
    #info, h5 {
        text-align:center;
     }  
    #info input {
         width:200px;
    }   
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function swapHref(n) {
    var urls=new Array();
          urls[0]='http://www.codingforums.com';
          urls[1]='http://www.google.com';
          urls[2]='http://www.yahoo.com';
    
       document.getElementById('linkA').href=urls[n];
       document.forms[0][0].value=urls[n];
    
     }
    //-->
    </script>
    
    </head>
    <body onload="document.forms[0][0].value='http://www.codingforums.com'">
    
    <h5>this is the href to which a click - on the single image - will send you</h5>
    
    <form action="#">
    <div id="info">
    <input type="text"/>
    </div>
    </form>
    
    <div  id="link">
    <a id="linkA" href="http://www.codingforums.com">
    <img src="apple3.jpg" alt=""/>
    </a>
    </div>
    
    <div id="container">
    <img src="apple0.jpg" alt="" onmouseover="swapHref(0)"/>
    <img src="apple1.jpg" alt="" onmouseover="swapHref(1)"/>
    <img src="apple2.jpg" alt="" onmouseover="swapHref(2)"/>
    </div>
    
    </body>
    </html>
    By the way like kor, I cannot fathom MM scripting.

    coothead

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THANK YOU!!

    Here's the combination that does just what I want.
    Needless to say, you will get credit in the html when I use this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>mouseout href change</title>
    
    <base href="http://coothead.homestead.com/files/"/>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    
    <style type="text/css">
    <!--
    body {
         background-color:#999;
     }
    #info, h5 {
        text-align:center;
     }  
    #info input {
         width:200px;
    }   
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function swapHref(n) {
    var urls=new Array();
          urls[0]='apple0.jpg';
          urls[1]='apple1.jpg';
          urls[2]='apple2.jpg';
          urls[3]='apple3.jpg';
    
       document.getElementById('linkA').href=urls[n];
       document.forms[0][0].value=urls[n];
    
     }
    //-->
    </script>
    
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v3.0
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    
    </head>
    <body>
    
    <div align="left">
      <table border="0" cellpadding="0" cellspacing="0" width="600" height="50">
        <tr>
          <td>The large apple image reflects 2 things;
            <ol type="i">
              <li>it shows the image of the apple that IS BEING or HAS JUST BEEN moused over</li>
              <li>it links to the image of THE LAST moused over apple<form action="#"><div id="info"><input type="text" value="apple0.jpg" size="20"/></div></form></li>
          </ol>
          </td>
        </tr>
      </table>
    </div>
    
    <!--Image that changes appearance AND its link value-->
    <p align="left">
      <a id="linkA" href="apple0.jpg" target="_blank">
        <img src="apple0.jpg" alt="" border="0" width="360" height="280" name="target" id="target"/>
      </a>
    </p>
    <!--End of Image that changes appearance AND its link value-->
    
    <br>
    
    <!--Start rollover links-->
    <p align="left">
      <a class="link" href="apple0.jpg" target="_blank"
        onmouseout="swapHref(0)" 
        onmouseover="MM_swapImage('target','','apple0.jpg',1)"><img src="apple0.jpg" width="84" height="66"/></a>
      <a class="link" href="http://coothead.homestead.com/files/apple1.jpg" target="_blank" 
        onmouseout="swapHref(1)"
        onmouseover="MM_swapImage('target','','apple1.jpg',1)"><img src="apple1.jpg" width="84" height="66"/></a>
      <a class="link" href="http://coothead.homestead.com/files/apple2.jpg" target="_blank" 
        onmouseout="swapHref(2)"
        onmouseover="MM_swapImage('target','','apple2.jpg',1)"><img src="apple2.jpg" width="84" height="66"/></a>
      <a class="link" href="http://coothead.homestead.com/files/apple3.jpg" target="_blank" 
        onmouseout="swapHref(3)"
        onmouseover="MM_swapImage('target','','apple3.jpg',1)"><img src="apple3.jpg" width="84" height="66"/></a>
    </p>
    <!--End rollover links-->
    
    </body>
    </html>

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

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    cooter's an animal.

    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,744
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Quote Originally Posted by canadianjameson
    cooter's an animal.

    Well, that makes a change, I'm more used to cootie is a louse.

    coothead


  •  

    Posting Permissions

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