Skip navigation
kingjeremy02
kingjeremy02
Currently Being Moderated

click image, swap image elsewhere on page - how?

Jun 9, 2009 2:05 PM

Basic no doubt - but if you don't know how, it can be frustrating...   :?  I know it has to do with MM_swapImage - 2 actions are occuring.

 

1.  I have a thumbnail image - that swaps for an image on rollover
2.  (I need...) OnClick that thumbnail to have another larger image appear elsewhere on the page (different cell of a table) - how would the code look for this?

 

a.  Name of the place for the larger image is "[b]stage[/b]" (I've put a default spacer image there named stage_spacer.gif )
b.  Thumbnail is photo-1s
c.  Rollover thumbnail is photo-1TH
d.  Name of the larger image is photo-1

 

this is what I have so far, but it isn't working


<img src="assets/photo-1s.jpg" width="110" height="90" vspace="5" align="absbottom" id="Image1" onmouseover="MM_swapImage('Image1','','assets/photo-1TH.jpg',1)" onmouseout="MM_swapImgRestore()" onclick="MM_swapImage('assets/photo-1s.jpg','','assets/photo-1TH.jpg' ,'Stage','','assets/photo-1.jpg',1)""/>


the code for the other cell looks like this


<tr><td height="275" valign="top" class="bodyText"><p><span class="style1"><img src="mm_spacer.gif" name="stage" width="304" height="275" border="0"/></td></tr>

 

Help would be much appreciated ! !

942 Views   6 Replies   Latest reply: kingjeremy02, Jun 10, 2009 2:35 PM
 
Replies
  • DwFAQ
    Currently Being Moderated
    1. DwFAQ,
    Jun 9, 2009 2:08 PM   in reply to kingjeremy02
    Report

    You can use spry gallery or master/detail (view source code).

     
    |
    Mark as:
  • kingjeremy02
    Currently Being Moderated
    2. kingjeremy02,
    Jun 9, 2009 4:54 PM   in reply to DwFAQ
    Report

    Thanks for your reply.

    I can certainly see how spry gallery would be useful for a photo gallery type situation - it would be overkill for what I need however as the few images only comprise a portion of the page.

     

    What I'm really looking for is how to fix the html code to make "it" work.  I'm getting closer ... but not there yet ...

    Here's the code as it sits now:

     

    <img src="assets/photo-1s.jpg" alt="Photo manipulation thumb 1" width="110" height="90" vspace="5" align="absbottom" id="Photo1s" onmouseover="MM_swapImage('Photo1s','','assets/photo-1TH.jpg',1)" onmouseout="MM_swapImgRestore()""  onclick="MM_swapImage('stage','','assets/photo-1.jpg','Photo1s','','a ssets/stage_spacer.gif',1)"/>

     

     

     

    Once I click the rollover image, the large image appears but the thumbnail disappears - I don't want the thumbnail to disappear while the disjointed larger image appears.   onMouseout returns everything back to its original state.

     

    What I'm after is a rollover on photo-1s to photo-1TH.  But onclick,photo-1TH remains and "stage" is replaced with the larger "photo-1"

     

    I'm sure it's something easy I'm missing. 

     
    |
    Mark as:
  • DwFAQ
    Currently Being Moderated
    3. DwFAQ,
    Jun 10, 2009 8:38 AM   in reply to kingjeremy02
    Report

    "it" can't be done without customization of your javascript. Rewrite your swap image function with appropriate behaviors to make your current code function as desired.

     

    Good luck!

     
    |
    Mark as:
  • kingjeremy02
    Currently Being Moderated
    4. kingjeremy02,
    Jun 10, 2009 8:56 AM   in reply to DwFAQ
    Report

    Any idea what the customized code should look like specifically?

     
    |
    Mark as:
  • Nadia Perre
    Currently Being Moderated
    5. Nadia Perre,
    Jun 10, 2009 9:44 AM   in reply to kingjeremy02
    Report

    I think you're after a disjointed rollover effect:

     

    See if this tutorial sheds some light :

    http://www.communitymx.com/content/article.cfm?cid=E11E8

     

     

    --

    Nadia

    Adobe® Community Expert : Dreamweaver

    http://twitter.com/nadiap

    --------------------------------------------------

    Unique CSS Templates |Tutorials |SEO Articles

    http://www.DreamweaverResources.com

    http://csstemplates.com.au/

     
    |
    Mark as:
  • kingjeremy02
    Currently Being Moderated
    6. kingjeremy02,
    Jun 10, 2009 2:35 PM   in reply to Nadia Perre
    Report

    Nadia that's really close.

     

    But instead of a disjointed rollover (where the disjointed image disappears on mouseout) - I have an onclick action that permanently displays the disjointed image until I click another button?

     

    How do I adjust the HTML to accomplish this?  Below is the HTML for a disjointed rollover - but how do I make the image stick onclick.  Then swap the image when another button is clicked?

     

    onMouseOver="MM_swapImage('image05T','','assets/gallery_images/image05 Th.jpg','Stage','','assets/gallery_images/image05.jpg',1)">
    <img src="assets/gallery_images/image05T.jpg" name="image05T" width="47" height="70" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()"

     

     

    image05T - is the initial thumbnail image

    image05Th - is the rollover thumbnail image

    image05 - is the disjointed larger image

     

    a disjointed rollover is close but not quite it...

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points