SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: swapping images

  1. #1
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question swapping images

    Hope this is the right forum. My image is changing for the rollover to stage, it is changing also on the mousedown to stage 3, but once the image has been clicked and is once again rolled over it goes back to stage 2 - yet I want it to stay as stage 3.

    Code:
     <td height="50%"><a href="#" onmousedown="MM_swapImage('Image1','','stage3.jpg',1)" onmouseover="MM_swapImage('Image1','','stage2.jpg',1)"><img src="stage1.jpg" name="Image1" width="25" height="25" border="0" id="Image1" /></a></td>
    Also I have other images on the screen that will work in the same way and I want to make it so that only one of them can be pressed down at one time (stage 3), i.e. on clicking a different image to the one already selected it applies the behaviour (stage 3) to the newly selected image and resets the other (stage 1). Anyone who can direct me or comment is most welcome!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once the link is pressed, it will most likely open another page so any state set will be lost anyway. Is what you actually want to have the link indicate the current page?

  3. #3
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I was hoping not to go to another page but rather change some dynamic data on that page (a different query). So I will be needing the image to be down and to only change when it is clicked again (restoring it to its' original setting) - any finders?

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,042
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You'll need to javascript to handle this type of behavior if the page isn't reloading. If you page is reloading than you could use the server side language of choice to output text rather than a link. This is more a programming concern rather than a design one.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by g_force
    ...
    So I will be needing the image to be down and to only change when it is clicked again (restoring it to its' original setting) - any finders?
    Test styling the hover state instead of the script hover, keeping the onmousdown.
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry. . .how do I do that?

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe something like this (not tested):
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    table td a img{ display:block; border:0; height:25px; width:25px;}
    table td a{ position:relative; height:25px; width:25px;}
    table td a span{ position:absolute; top:0; left:0; height:25px; width:25px; background:url(stage2.jpg) no-repeat -100% 0;}
    table td a:hover span{ background-position:center; cursor:hand;}
     
    </style></head><body>
     
    <table>
    	<tr>
    		<td height="50%"><a href="#" onmousedown="MM_swapImage('Image1','','stage3.jpg',1)"><img src="stage1.jpg" name="Image1" id="Image1"><span></span></a></td>
    	</tr>
    </table>
     
    </body></html>
    Last edited by Erik J; Aug 30, 2008 at 11:51. Reason: Correct typo and add block display on "a"
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmm..thanks..

    Of course after adding the js function (MM_swapImage) to that code I was able only to get the onmousedown going - nothing else is working the way I would want

    Thanks for the effort;~

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you spot the fatal typo in my example?

    Also the a-selector should be displayed block to take the lengths, sorry.
    Happy ADD/ADHD with Asperger's

  10. #10
    SitePoint Addict
    Join Date
    Jul 2008
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what you're thinking but how exactly do I do that?

    .. yes - I am somewhat of an apprentice here!


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
  •