www.webdeveloper.com
Results 1 to 3 of 3

Thread: image rolloff replacement

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    2

    image rolloff replacement

    Tried searching and I can't find anything that works.

    I want to have a designated area that changes images on roll over and then when you roll off restores back to the original image.

    Here's what I have so far.


    Javascript:

    function swap(image) {
    document.getElementById("main").src = image.href;
    }


    HTML:

    <a onclick="swap(this); return false;" href="image.png">
    <img src="image_s.png"></img>
    </a>

    <div style="width:300px; height:300px;"><img id="main" src="image_s.png"></div>

  2. #2
    Join Date
    Oct 2013
    Posts
    25
    It would be simpler to do it with CSS instead of JS. Here is how you could do it with CSS.
    Code:
    <style>
    	#image{
    		background:url(image.png) no-repeat;
    		width:256px;
    		height:256px;
    	}
    	#image:hover{
    		background:url(swap_image.php) no-repeat;
    	}
    	
    </style>
    
    <body>
    
    <div id="image"></div>
    
    </body>
    However, to answer your question, instead of onclick try onmouseover='swap(image)' and onmouseout='swap(image)'

    Code:
    <script>
    
    function swap(image){
    		var img = "images/" + image; //If you have a Image Folder.
    		document.getElementById('image').src=img;
    	};
    
    </script>
    
    <html>
    
    <img id="image" src="img.png" onmouseover="swap('new_img.png')" onmouseout="swap('img.png')">
    
    
    </html>
    I tested this way on my localhost and it seems to be working.

  3. #3
    Join Date
    Oct 2013
    Posts
    2
    thanks! Will plug it in later and test it out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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