CSS Codes
CSS Layouts
Results 1 to 8 of 8

Thread: Problem with dreamweaver and image swap..

  1. 03-12-2009, 01:00 AM #1
    crash41
    crash41 is offline Junior Coders
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with dreamweaver and image swap..

    It's not so much a problem - i just can't figure out how to accomplish what we need.

    I can't seem to explain this well - so i created an example of what i'm trying to do.

    http://www.myvoicemusic.org/test/

    If you rollover the 1, 2, or 3 - the image will change - as well as the main image. What i need to do is create links for the main image - but each 'version' of it needs to have a different link.

    any ideas? This is the code:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <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)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    function MM_findObj(n, d) { //v4.01
    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[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); 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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>

    <body bgcolor="#999999" onload="MM_preloadImages('images/small1_o.jpg','images/small2_o.jpg','images/small3_o.jpg','images/large2.jpg','images/large3.jpg')">
    <table width="548" height="497" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="400" rowspan="3"><img src="images/large1.jpg" name="main" width="400" height="400" id="main" /></td>
    <td width="148" height="181"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/small1_o.jpg',1)"><img src="images/small1.jpg" name="Image1" width="100" height="100" border="0" id="Image1" onmouseover="MM_swapImage('main','','images/large1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    </tr>
    <tr>
    <td height="172"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/small2_o.jpg',1)"><img src="images/small2.jpg" name="Image2" width="100" height="100" border="0" id="Image2" onmouseover="MM_swapImage('main','','images/large2.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    </tr>
    <tr>
    <td height="144"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/small3_o.jpg',1)"><img src="images/small3.jpg" name="Image3" width="100" height="100" border="0" id="Image3" onmouseover="MM_swapImage('main','','images/large3.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    </tr>
    </table>
    </body>
    </html>
    Reply With Quote Reply With Quote
  2. 03-12-2009, 01:53 PM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Make this:

    Code:
    <img src="images/large1.jpg" name="main" width="400" height="400" id="main" />
    Like:

    Code:
    <a id="mainlink" href="whatever1.htm"><img src="images/large1.jpg" name="main" width="400" height="400" id="main" /></a>
    Then just add to your rollover(s), ex:

    Code:
    onmouseover="document.getElementById('mainlink').href='whatever2.htm';MM_swapImage('Image2','','images/small2_o.jpg',1)"
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 03-12-2009, 03:20 PM #3
    crash41
    crash41 is offline Junior Coders
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you!!!!! that helps so much..
    Reply With Quote Reply With Quote
  4. 03-13-2009, 03:39 PM #4
    crash41
    crash41 is offline Junior Coders
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wait. Now for the $1,000,000 question.

    Can i have a rollover on top of that main image - which is shown depending on what image is rolled over on the right?
    Reply With Quote Reply With Quote
  5. 03-13-2009, 06:38 PM #5
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Sure, but MM_swapImage() may or may not be up to the task. It isn't the most versatile or up to date image swapping routine I can think of, though fairly good at what it does.

    Just to be on the safe side, I'd write something from scratch for the main image:

    Code:
    <img src="images/large1.jpg" name="main" width="400" height="400" id="main" 
onmouseover="var p = this.parentNode.href; this.currsrc = this.src;
this.src =
/whatever.htm/.test(p)? 'whatever.jpg' :
/someother.htm/.test(p)? 'someother.jpg' :
/another.htm/.test(p)? 'another.jpg :
this.currsrc;" 
onmouseout="this.src = this.currsrc;" />
    It would still be good to include its rollover images in your preload routine though. The main image will then rollover depending upon what href you've assigned to its link.

    And this may or may not conflict with your other src changes to that image, but I tend to think it will be OK.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  6. 03-13-2009, 08:27 PM #6
    crash41
    crash41 is offline Junior Coders
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks - but now i'm lost.

    Maybe this would be easier.

    On the main image - i'd like to break it up using an image map for links.

    so - for example - you rollover the '2' square - that changes the main image - that all works so far.

    But instead of making that main image have only one link - how can i break it into sections (maybe top right, top left, bottom right, bottom left) with a different link for each?
    Reply With Quote Reply With Quote
  7. 03-13-2009, 11:39 PM #7
    crash41
    crash41 is offline Junior Coders
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I found another one of your replies to another posting and am trying this:

    <body>
    <a id="mainlink"><img src="images/main_01.jpg" name="main" width="571" height="511" border="0" usemap="#Map1"/></a>

    <map name="Map1">
    <area shape="rect" coords="0,1,238,509" href="http://www.link1.com" />
    <area shape="rect" coords="262,3,486,510" href="http://www.link2.com" />

    </map>


    <map name="Map2">
    <area shape="rect" coords="0,1,238,509" href="http://www.link3.com" />
    <area shape="rect" coords="262,3,486,510" href="http://www.link4.com" />

    </map>

    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav','','images/crops_R.jpg',1)"><img src="images/crops.jpg" name="nav" width="199" height="150" border="0" onMouseOver="document.images['mainlink'].setAttribute('usemap','#Map2',0);MM_swapImage('main','','images/main_03.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>

    </body>

    But it's not working

    Any ideas?
    Last edited by crash41; 03-14-2009 at 12:07 AM.
    Reply With Quote Reply With Quote
  8. 03-17-2009, 10:55 PM #8
    crash41
    crash41 is offline Junior Coders
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    bumpity bump bump
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules