Changing images with mouseover in Javascript
0
Need help changing the images with mouseover and mouse out with preloaded images. I was able to figure out the preloading but I can't get the image to change. If anybody can help me out it would be greatly appreciated.
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function preload()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length;i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.mouseover=function()
image1=image.src="images/release.jpg";
;
image1.onmouseout = function()
image1=image.src="images/hero.jpg";
;
image2.onmouseover = function()
image.src="images/deer.jpg";
;
image2.onmouseout= function()
image.src="images/bison.jpg";
;
;
javascript html
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
add a comment |
0
Need help changing the images with mouseover and mouse out with preloaded images. I was able to figure out the preloading but I can't get the image to change. If anybody can help me out it would be greatly appreciated.
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function preload()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length;i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.mouseover=function()
image1=image.src="images/release.jpg";
;
image1.onmouseout = function()
image1=image.src="images/hero.jpg";
;
image2.onmouseover = function()
image.src="images/deer.jpg";
;
image2.onmouseout= function()
image.src="images/bison.jpg";
;
;
javascript html
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
add a comment |
0
0
0
Need help changing the images with mouseover and mouse out with preloaded images. I was able to figure out the preloading but I can't get the image to change. If anybody can help me out it would be greatly appreciated.
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function preload()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length;i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.mouseover=function()
image1=image.src="images/release.jpg";
;
image1.onmouseout = function()
image1=image.src="images/hero.jpg";
;
image2.onmouseover = function()
image.src="images/deer.jpg";
;
image2.onmouseout= function()
image.src="images/bison.jpg";
;
;
javascript html
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
Need help changing the images with mouseover and mouse out with preloaded images. I was able to figure out the preloading but I can't get the image to change. If anybody can help me out it would be greatly appreciated.
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function preload()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length;i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.mouseover=function()
image1=image.src="images/release.jpg";
;
image1.onmouseout = function()
image1=image.src="images/hero.jpg";
;
image2.onmouseover = function()
image.src="images/deer.jpg";
;
image2.onmouseout= function()
image.src="images/bison.jpg";
;
;
javascript html
javascript html
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
asked Mar 31 '18 at 0:06
Chris BenzolaChris Benzola
82
82
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
1
The way is changing the .src attribute of an image object.
image1.src="images/release.jpg";
instead of
image1=image.src="images/release.jpg";
Althought we don't usually do it with javascript. The way is with CSS, displaying the image as background-image of a DOM element and setting an other background-image on the same element on :hover.
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.
– Chris Benzola
Mar 31 '18 at 0:30
add a comment |
0
From what I can see you create all the variables inside the function preload and then you try to access them from outside the function where you created them.
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
add a comment |
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
1
Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)
– Joel
Nov 13 '18 at 1:32
add a comment |
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: white;
width: 790px;
margin: 0 auto;
border: 3px solid blue;
padding: 1em;
h1
color: blue;
margin: 0;
padding: 0;
text-align: center;
p
margin: 0;
padding: .5em 0;
text-align: center;
ul
display: none;
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)
– Joel
Nov 13 '18 at 1:56
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49582938%2fchanging-images-with-mouseover-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The way is changing the .src attribute of an image object.
image1.src="images/release.jpg";
instead of
image1=image.src="images/release.jpg";
Althought we don't usually do it with javascript. The way is with CSS, displaying the image as background-image of a DOM element and setting an other background-image on the same element on :hover.
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.
– Chris Benzola
Mar 31 '18 at 0:30
add a comment |
1
The way is changing the .src attribute of an image object.
image1.src="images/release.jpg";
instead of
image1=image.src="images/release.jpg";
Althought we don't usually do it with javascript. The way is with CSS, displaying the image as background-image of a DOM element and setting an other background-image on the same element on :hover.
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.
– Chris Benzola
Mar 31 '18 at 0:30
add a comment |
1
1
1
The way is changing the .src attribute of an image object.
image1.src="images/release.jpg";
instead of
image1=image.src="images/release.jpg";
Althought we don't usually do it with javascript. The way is with CSS, displaying the image as background-image of a DOM element and setting an other background-image on the same element on :hover.
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
The way is changing the .src attribute of an image object.
image1.src="images/release.jpg";
instead of
image1=image.src="images/release.jpg";
Althought we don't usually do it with javascript. The way is with CSS, displaying the image as background-image of a DOM element and setting an other background-image on the same element on :hover.
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
answered Mar 31 '18 at 0:12
BanNsS1BanNsS1
1448
1448
Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.
– Chris Benzola
Mar 31 '18 at 0:30
add a comment |
Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.
– Chris Benzola
Mar 31 '18 at 0:30
Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.
– Chris Benzola
Mar 31 '18 at 0:30
Alright I got it to work, thank you. And yeah I know, I had to do it this way for my javascript class.
– Chris Benzola
Mar 31 '18 at 0:30
add a comment |
0
From what I can see you create all the variables inside the function preload and then you try to access them from outside the function where you created them.
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
add a comment |
0
From what I can see you create all the variables inside the function preload and then you try to access them from outside the function where you created them.
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
add a comment |
0
0
0
From what I can see you create all the variables inside the function preload and then you try to access them from outside the function where you created them.
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
From what I can see you create all the variables inside the function preload and then you try to access them from outside the function where you created them.
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
answered Mar 31 '18 at 0:16
Gabriel TufisGabriel Tufis
786
786
add a comment |
add a comment |
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
1
Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)
– Joel
Nov 13 '18 at 1:32
add a comment |
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
1
Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)
– Joel
Nov 13 '18 at 1:32
add a comment |
0
0
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
answered Nov 13 '18 at 1:27
Xuan WengXuan Weng
1
1
1
Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)
– Joel
Nov 13 '18 at 1:32
add a comment |
1
Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)
– Joel
Nov 13 '18 at 1:32
1
1
Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)
– Joel
Nov 13 '18 at 1:32
Welcome to SO, Xuan Weng! Code-only answers are discouraged here, as they provide no insight into how the problem was solved. Please update your solution with an explanation of how your code solves the OP's problem :)
– Joel
Nov 13 '18 at 1:32
add a comment |
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: white;
width: 790px;
margin: 0 auto;
border: 3px solid blue;
padding: 1em;
h1
color: blue;
margin: 0;
padding: 0;
text-align: center;
p
margin: 0;
padding: .5em 0;
text-align: center;
ul
display: none;
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)
– Joel
Nov 13 '18 at 1:56
add a comment |
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: white;
width: 790px;
margin: 0 auto;
border: 3px solid blue;
padding: 1em;
h1
color: blue;
margin: 0;
padding: 0;
text-align: center;
p
margin: 0;
padding: .5em 0;
text-align: center;
ul
display: none;
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)
– Joel
Nov 13 '18 at 1:56
add a comment |
0
0
0
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: white;
width: 790px;
margin: 0 auto;
border: 3px solid blue;
padding: 1em;
h1
color: blue;
margin: 0;
padding: 0;
text-align: center;
p
margin: 0;
padding: .5em 0;
text-align: center;
ul
display: none;
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: white;
width: 790px;
margin: 0 auto;
border: 3px solid blue;
padding: 1em;
h1
color: blue;
margin: 0;
padding: 0;
text-align: center;
p
margin: 0;
padding: .5em 0;
text-align: center;
ul
display: none;
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: white;
width: 790px;
margin: 0 auto;
border: 3px solid blue;
padding: 1em;
h1
color: blue;
margin: 0;
padding: 0;
text-align: center;
p
margin: 0;
padding: .5em 0;
text-align: center;
ul
display: none;
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>"use strict";
var $ = function(id) return document.getElementById(id); ;
window.onload = function()
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length; i++)
link = links[i];
image = new Image();
image.src = link.href;
// attach mouseover and mouseout events for each image
image1.onmouseover = function()
image1.src = "images/release.jpg";
;
image1.onmouseout = function()
image1.src = "images/hero.jpg";
;
image2.onmouseover = function()
image2.src="images/deer.jpg";
;
image2.onmouseout = function()
image2.src="images/bison.jpg";
;
;body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: white;
width: 790px;
margin: 0 auto;
border: 3px solid blue;
padding: 1em;
h1
color: blue;
margin: 0;
padding: 0;
text-align: center;
p
margin: 0;
padding: .5em 0;
text-align: center;
ul
display: none;
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
answered Nov 13 '18 at 1:35
Xuan WengXuan Weng
1
1
Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)
– Joel
Nov 13 '18 at 1:56
add a comment |
Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)
– Joel
Nov 13 '18 at 1:56
Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)
– Joel
Nov 13 '18 at 1:56
Welcome to SO, Xuan Weng! You've already answered this question, so it would be helpful if you deleted one of your redundant answers (and added explanations to your code as well!)
– Joel
Nov 13 '18 at 1:56
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49582938%2fchanging-images-with-mouseover-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
