www.webdeveloper.com
Results 1 to 5 of 5

Thread: swappin image after buttons clicked.

  1. #1
    Join Date
    May 2013
    Posts
    2

    Red face swappin image after buttons clicked.

    Hello! Can someone help me ? I wish that after clicking three different buttons a particular image is swapped with another?
    Thank you.

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254
    See for instance http://webdocdo.tripod.com/genericRo.../multiple.html swapping muptipleimages
    Code:
    <script language="JavaScript" type="text/javascript">
    			pic01 = new Image
    			pic01t = new Image
    			pic01j = new Image
    			pic01s = new Image
    			pic02 = new Image
    			pic02t = new Image
    			pic02j = new Image
    			pic02s = new Image
    			pic03 = new Image
    			pic03t = new Image
    			pic03j = new Image
    			pic03s = new Image
    			pic04 = new Image
    			pic04t = new Image
    			pic04j = new Image
    			pic04s = new Image
    			pic05 = new Image
    			pic05t = new Image
    			pic05j = new Image
    			pic05s = new Image
    			pic06 = new Image
    			pic06t = new Image
    			pic06j = new Image
    			pic06s = new Image
    
                            pic01.src = "images/pic01.gif"
    			pic01t.src = "images/pic01t.gif"
    			pic01j.src = "images/pic01j.gif"
    			pic01s.src = "images/pic01s.gif"
    	  		pic02.src = "images/pic02.gif"
    	  		pic02t.src = "images/pic02t.gif"
    	  		pic02j.src = "images/pic02j.gif"
    	  		pic02s.src = "images/pic02s.gif"
    			pic03.src = "images/pic03.gif"
    			pic03t.src = "images/pic03t.gif"
    			pic03j.src = "images/pic03j.gif"
    			pic03s.src = "images/pic03s.gif"
    			pic04.src = "images/pic04.gif"
    			pic04t.src = "images/pic04t.gif"
    			pic04j.src = "images/pic04j.gif"
    			pic04s.src = "images/pic04s.gif"
    			pic05.src = "images/pic05.gif"
    			pic05t.src = "images/pic05t.gif"
    			pic05j.src = "images/pic05j.gif"
    			pic05s.src = "images/pic05s.gif"
    			pic06.src = "images/pic06.gif"
    			pic06t.src = "images/pic06t.gif"
    			pic06j.src = "images/pic06j.gif"
    			pic06s.src = "images/pic06s.gif"
    
    
    </script>
    in <BODY>
    <div id="space">
    <img src="images/pic01.gif" width="200" height="300" name="ensemble" id="ensemble" 
    alt="Ensemble"><br>
    <h3 id="outfit" align="center">Caption about Ensemble.</h3>
    </div>
    <div id="thumbnails">
    <a href="#"  target="space"  onclick="javascript:loadpage('images/pic01.gif')" 
     onMouseOver="document.ensemble.src=pic01.src; document.tops.src=pic01t.src; document.jackets.src=pic01j.src; document.skirts.src=pic01s.src; document.getElementById('outfit').innerHTML ='Ensemble 01'" title="Ensemble 01">
            <img class="thumb" src="images/pic01.gif" alt="pic01"></a>
    
    <a href="#"  target="space"   onclick="javascript:loadpage('images/pic02.gif')" 
    onclick="javascript:loadpage('images/pic02.gif')" 
    onMouseOver="document.ensemble.src=pic02.src; document.tops.src=pic02t.src; document.jackets.src=pic02j.src; document.skirts.src=pic02s.src; document.getElementById('outfit').innerHTML ='Ensemble 02'" title="Ensemble 02">
            <img class="thumb" src="images/pic02.gif" alt="pic02"></a>
    
    <a href="#"  target="space"   onclick="javascript:loadpage('images/pic03.gif')" 
    onMouseOver="document.ensemble.src=pic03.src; document.tops.src=pic03t.src; document.jackets.src=pic03j.src; document.skirts.src=pic03s.src; document.getElementById('outfit').innerHTML ='Ensemble 03'" title="Ensemble 03">
            <img class="thumb" src="images/pic03.gif" alt="pic03"></a>
        
    <a href="#"  target="space"   onclick="javascript:loadpage('images/pic04.gif')" 
    onMouseOver="document.ensemble.src=pic04.src; document.tops.src=pic04t.src; document.jackets.src=pic04j.src; document.skirts.src=pic04s.src; document.getElementById('outfit').innerHTML ='Ensemble 04'" title="Ensemble 04">
            <img  class="thumb" src="images/pic04.gif" alt="pic04"></a>
            
        
    <a href="#"  target="space" 
    onMouseOver="document.ensemble.src=pic05.src; document.tops.src=pic05t.src; document.jackets.src=pic05j.src; document.skirts.src=pic05s.src">
            <img  class="thumb" src="images/pic05.gif" alt="pic05"></a>
            
        
    <a href="#"  target="space" 
    onMouseOver="document.ensemble.src=pic06.src; document.tops.src=pic06t.src; document.jackets.src=pic06j.src; document.skirts.src=pic02s.src">
            <img  class="thumb" src="images/pic06.gif" alt="pic06"></a>
     ...
    Or simpler code at http://www.lapearldesigns.com/legacy/index.html (onMouseOver and first onClick work), or http://www.auntnini.com/sketch/index.html, or http://www.josephdenaro.com/color/index.html

    If you want to change a big image in another location, name that big image holder so you can "talk to it" in JavaScript to change its image src source.

    If you want to change the image you are clicking or mousing over, you can you the keyword this

    Code:
    <img src="first.gif" onMouseOver="this.src='second.gif'" onMouseOut="this.src='first.gif'">
    Make sure the nested "'quotes'" are right. Have to think about opposite of onClick -- that's actually mouseDown and mouseUp.

    If you want a button or text instead of thumbnails, just wrap that in <a > anchor tags </a>
    Last edited by auntnini; 05-10-2013 at 04:15 PM. Reason: typos

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254
    See KOR's comment and code about using a function instead of coding locally
    at http://www.webdeveloper.com/forum/sh...n-Microsoft-IE

  4. #4
    Join Date
    May 2013
    Posts
    2
    But i wish after I click or rollover on 3 particular buttons that a an image change .
    Thanks

  5. #5
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254
    What don't you get? The first Tripod demo changes 4 images. The other examples (look at them). change one image at a time.

    If you look at KOR's example code, you see another way to call a function to change images.

    Can you provide a link to your site?

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