Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    restore image on rollover

    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
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow, 24 hours and 70 some views and not a single response back. Good thing the healthcare.gov developers aren't on this site looking for help. It would be years before the site was up and running.

    I guess no one does the whole forum thing anymore. Some of the forums I've been on in the past would have had a reply within 20 minutes.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Perhaps nobody that would be interested in replying was around lately?

    First of all, inline JS should be avoided if possible. The practice for quite a few years has been unobtrusive JavaScript (JS separate from HTML so that neither gets in the way of the other).

    Then, if you want to have an image swap on mouseover, use the mouseover event, not click. And along with mouseover goes mouseout.

    Here is my attempt:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>test</title>
    		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	</head>
    	<body>
    		<div>
    			<a href="image.png">link</a>
    			<img id="main" src="image_s.png" alt="" />
    		</div>
    		<script type="text/javascript">
    			// <![CDATA[
    			(function() {
    				var a = document.getElementsByTagName('a');
    				var main = document.getElementById('main');
    				var origImg = main.src;
    				for(var i=0;i<a.length;i++) {
    					a[i].onmouseover = function() {
    						main.src = this.href;
    					}
    					a[i].onmouseout = function() {
    						main.src = origImg;
    					}
    				}
    			})();
    			// ]]>
    		</script>
    	</body>
    </html>

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by chogan View Post
    wow, 24 hours and 70 some views and not a single response back.
    I actually wrote a demo for this yesterday, but never got around to posting it because of a bug in Google Chrome where the initial image shrinks the first few times you use the rollover. That issue is still there, but here's the demo anyway:

    Live Demo: https://patrick.dark.name/web.dev/de...anipulation.1/

    Live Demo Code:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet type="application/xml" href="../style.sheets/boilerplate.xslt"?>
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Demo for CodingForums.com Thread 306569: restore image on rollover</title>
    		<link rel="prefetch" type="image/svg+xml" href="../images/icons/circle.svg"/>
    		<link rel="prefetch" type="image/svg+xml" href="../images/icons/donut.svg"/>
    		<link rel="prefetch" type="image/svg+xml" href="../images/icons/star.svg"/>
    		<link rel="prefetch" type="image/svg+xml" href="../images/icons/star.quintet.svg"/>
    		<meta itemprop="external_resource" content="../images/icons/circle.svg"/>
    		<meta itemprop="external_resource" content="../images/icons/donut.svg"/>
    		<meta itemprop="external_resource" content="../images/icons/star.svg"/>
    		<meta itemprop="external_resource" content="../images/icons/star.quintet.svg"/>
    		<style>
    			#demo figure { float: left; }
    			#demo a::before { content: "👉 "; font-family: "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
    		</style>
    	</head>
    	<body>
    		<h1 id="demo.title">Demo for CodingForums.com Thread 306569: <cite>restore image on rollover</cite></h1>
    		<section id="demo.description">
    			<h1>Demo Description</h1>
    			<p>This demo demonstrates how to create a reusable, link‐based image rollover method via JavaScript.</p>
    		</section>
    		<section id="demo">
    			<h1>Demo</h1>
    			<figure>
    				<figcaption><a id="link1" href="../images/icons/donut.svg" data-href-alt="Donut">Gimme a donut!</a></figcaption>
    				<img id="image1" alt="Circle" width="200" height="200" src="../images/icons/circle.svg"/>
    			</figure>
    			<figure>
    				<figcaption><a id="link2" href="../images/icons/star.quintet.svg" data-href-alt="Star Quintet">Kaboom!</a></figcaption>
    				<img id="image2" alt="Star" width="200" height="200" src="../images/icons/star.svg"/>
    			</figure>
    			<script>
    				// This script was validated at http://jshint.com/ using the following settings:
    				/* jshint browser: true, curly: true, eqeqeq: true, devel: false, forin: true, immed: true, latedef: true, newcap: false, noarg: true, noempty: true, nonew: true, plusplus: true, quotmark: double, undef: true, unused: strict, strict: true, trailing: true */
    				(function () {
    					"use strict";
    					HTMLAnchorElement.prototype.createRollover = function (rolloverTarget) {
    						this.addEventListener("click", function (event) {
    							event.preventDefault();
    						});
    						this.addEventListener("mouseover", function () {
    							rolloverTarget.setAttribute("data-old-alt", rolloverTarget.getAttribute("alt"));
    							rolloverTarget.setAttribute("alt", this.getAttribute("data-href-alt"));
    							rolloverTarget.setAttribute("data-old-src", rolloverTarget.getAttribute("src"));
    							rolloverTarget.setAttribute("src", this.getAttribute("href"));
    						});
    						this.addEventListener("mouseout", function () {
    							rolloverTarget.setAttribute("alt", rolloverTarget.getAttribute("data-old-alt"));
    							rolloverTarget.setAttribute("src", rolloverTarget.getAttribute("data-old-src"));
    							rolloverTarget.removeAttribute("data-old-alt");
    							rolloverTarget.removeAttribute("data-old-src");
    						});
    					};
    					document.getElementById("link1").createRollover(document.getElementById("image1"));
    					document.getElementById("link2").createRollover(document.getElementById("image2"));
    				})();
    			</script>
    		</section>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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