I've been reading articles online, watching YouTube videos - I am lost. This is the last bit of code I have tried, which as probably changed by now as you read this. It looks so simple, I don't understand what I am doing wrong? My mind just will not grasp this. Any help? I am trying to replace the image (src) with the image in (id) when the mouse is over it. Right now I am really just trying to get an alert when I mouse over the image. Anything!
**** UPDATED CODE ****
THIS JUST IN! I'm an idiot. Javascript file wasn't directed properly, missing the sub folder. Still struggling, but now at least my rollover is working. palm to forehead
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="styles/main.css">
<script src="js/rollover.js"></script>
</head>
<body>
<h1>Rollover Test</h1>
<ul id="rollover_test">
<li>
<img src="images/h1.jpg" alt="img1" id="images/h4.jpg" onmouseover="MouseOver('img1');" onmouseout="MouseOut('img1')">
</li>
<li>
<img src="images/h2.jpg" alt="img2" id="images/h5.jpg">
</li>
<li>
<img src="images/h3.jpg" alt="img3" id="images/h6.jpg">
</li>
</ul>
</body>
</html>
The Javascript:
var $ = function (id) {
return document.getElementById(id);
};
function MouseOver(id){
// I'm trying to figure out the syntax in here to swap the id and src tags
alert($("id").src);
};
function MouseOut(id){
alert("out");
}
window.onload = function () {
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
links = links[i];
image = new Image();
};
};
Actually, these simple three lines of code are enough to make it work.
$("img").on('mouseenter', function() {
$(this).attr("src", $(this).attr('id'));
});
img {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rollover Test</h1>
<ul id="rollover_test">
<li>
<img src="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg" alt="Img1" id="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg">
</li>
<li>
<img src="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg" alt="Img2" id="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg">
</li>
<li>
<img src="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg" alt="Img3" id="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg">
</li>
</ul>
In your HTML the id attribute has been changed to data-id just because it's best to keep the id attribute for css identification.
by using mouseenter and mouseleave in cooperation the following snippet looks at each image as encountered and swaps its src attribute into a temporary data-temp attribute attached to that image.
Hopefully the snippet comments are self explanatory.
$("li").find('img').on({
mouseenter: function() {
$this = $(this); // get the current img object
var src = $this.attr('src'), // get the current src
id = $this.attr('data-id'); //get the alternative src
$this.data('temp', src); // store in a new temporary data attribute
$this.attr('src', id);
},
mouseleave: function() {
var temp = $(this).data('temp'); // lookup temp
$(this).attr('src', temp); // swap image back
}
})
/*
var $ = function(id) {
return document.getElementById(id);
};
function MouseRollover(img) {
alert("made it");
var oldIMG = $(this).attr("src");
var newIMG = $(this).attr("id");
};
window.onload = function() {
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i = 0; i < links.length; i++) {
links = links[i];
image = new Image();
}
//rollover
$("li").on('mouseenter', function() {
alert("yep");
});
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rollover Test</h1>
<ul id="rollover_test">
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSm2etjS8VnJRwuZA8ormtAyPrIt8x0twLr-APiGwrkcX8NXe3P" alt="Img1" data-id="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-W40Oxb_QCTaGT9MVgTuXaDxacAKgChfvATaS9KffbHfGc16n">
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTp6eZg_pJb0_NFxdaFYSnqMzPMJc-R_iwp2x8HarvdKzoNaCXv" alt="Img2" data-id="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwvO67upMvk1q3MicNCujQ67D2EgJf8HyVA36FqM9qrv2B4Mue">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREN8xal0JlNdcPcz-94kQqZ8t3uBWEfm3T4LWpPY5PhX7qndGp" alt="Img3" data-id="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT07dVJl5ghqji58Su7Gs9RuSuCgleBDUITx2Dngh3ibVWzLfde">
</li>
</ul>
* SOLVED *
Once I figured out that my javascript wasn't linked right, it was just a matter of playing with syntax. Super easy. I am an idiot.
HTML
<ul id="image_rollovers">
<li>
<img src="images/h1.jpg" alt="images/h4.jpg" id="img1" onmouseenter="MouseEnter('img1');" onmouseout="MouseOut('img1')">
</li>
<li>
<img src="images/h2.jpg" alt="images/h5.jpg" id="img2" onmouseenter="MouseEnter('img2');" onmouseout="MouseOut('img2')">
</li>
<li>
<img src="images/h3.jpg" alt="images/h6.jpg" id="img3" onmouseenter="MouseEnter('img3');" onmouseout="MouseOut('img3')">
</li>
</ul>
JAVASCRIPT
var $ = function (id) {
return document.getElementById(id);
};
function MouseEnter(id){
var img = $(id);
originalURL = img.src;
var newURL = img.alt;
img.src = newURL;
};
function MouseOut(id){
var img = $(id);
img.src = originalURL;
}
window.onload = function () {
var originalURL;
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
links = links[i];
image = new Image();
};
};
Works like a charm.
Thanks, all, for the tips and advice.
Related
I am trying to make a simple program that allows me to mouse over one image to see another. I am really struggling with how the how to handle the first on mouseover function. I realize imageNode is undeclared, but I don't know where to declare it and what reference it is going to store.
If anyone out there could point me in the right direction to get have image1 replaced with another image in the HTML on mouseover and then return to image1 on mouseout, I would greatly appreciate it. I'm really lost right now.
I have included the HTML as well as the JavaScript below.
Thanks so much,
"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(evt) {
link = this; //this is image that is mouseover
// set new image
//imageNode.src = link.getAttribute("href"
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};
<!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></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>
one.
If you have some html like <div id="image-rollover"></div>,
you can switch out the image on hover like this using only css:
#image-rollover {
background-color: #000;
background-image: url('SOME_IMG_URL');
background-size: cover;
height: 100px;
width: 100px;
}
#image-rollover:hover {
background-image: url('SOME_OTHER_IMG_URL');
}
Example in JSFiddle
You can do this in Javascript by a simple method:
var imgOnMouseOver = "OVER_IMG_URI";
var imgOnMouseOut = "OUT_IMG_URI";
var container = document.getElementById("IMG_TAG_ID");
container.addEventListener("mouseover", function(){
container.setAttribute("src", imgOnMouseOver);
});
container.addEventListener("mouseout", function(){
container.setAttribute("src", imgOnMouseOut);
});
Example program works fine: https://jsfiddle.net/praveen17/tv8xu67f/2/
image1.onmouseover = function() {
image1.src="images/hero.jpg"
};
image1.onmouseout = function() {
image1.src="images/release.jpg"
};
image2.onmouseover = function() {
image2.src="images/deer.jpg"
};
image2.onmouseout = function() {
image2.src="images/bison.jpg"
};
};
I am trying to swap the src image with the id image. From what I see on other examples I thought this would be the way to go about doing it. It definitely does not work for me. This is my first time posting here so any help with formatting my question would be greatly appreciated also.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="main.css">
<script src="rollover.js"></script>
</head>
<body>
<section>
<h1>Image Rollovers</h1>
<ul id="image_rollovers">
<li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
<li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
</ul>
</section>
</body>
</html>
Javascript:
//FUNCTION
var $ = function (id) {
return document.getElementById(id);
}
//MOUSE EVENT FUNCTIONS
var rollover = function(evt) {
var link = this;
var imageNode = $("img");
imageNode.setAttribute("img", link.getAttribute("id"));
}
var rollout = function(evt) {
var link = this;
var imageNode = $("id");
imageNode.setAttribute("id", link.getAttribute("img"));
}
//ONLOAD EVENT HANDLER
window.onload = function () {
//GET ALL IMG TAGS
var linkNode = $("image_rollovers");
var images = linkNode.getElementsByTagName("img");
//PROCESS EACH IMAGE
var i, linkNode, image;
for ( i=0; i<images.length; i++)
{
linkNode = images[i];
linkNode.onmouseover = rollover;
linkNode.onmouseout = rollout;
}
}
First, you have a typo in the HTML, you're missing the > at the end of the third <img.
<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
^
Second, you're calling $("img") and $("id"), but there are no elements with those IDs. You should just be setting a variable to the appropriate attribute of link. There's no need for different functions for rollover and rollout, since they both just swap the id and src attributes.
//MOUSE EVENT FUNCTIONS
function swap_src_and_id(evt) {
var link = this;
var src = link.getAttribute("src");
link.setAttribute("src", link.getAttribute("id"));
link.setAttribute("id", src);
}
Third, you're calling linkNode.getElementsByTagName("src"), but there's no such tag. It should be img.
window.onload = function () {
//GET ALL IMG TAGS
var linkNode = $("image_rollovers");
var images = linkNode.getElementsByTagName("img");
//PROCESS EACH IMAGE
var i, linkNode, image;
for ( i=0; i<images.length; i++)
{
linkNode = images[i];
linkNode.onmouseover = swap_src_and_id;
linkNode.onmouseout = swap_src_and_id;
}
}
So I have this gallery page where I have multiple <img> tags with a unique picture. Clicking on the picture should take you to a another webpage with more info on that specific picture. Hence, all onclick()s are unique, depending on the src of the image.
Now, given the fact that all these <img> tags are virtually same save for picture, I decided to use JavaScript to make all of them in a loop, as seen below:
loadImageGalleryData
for (var i = 0; i < 21; i++) {
var imgSrc = "http://localhost:63342/Performance%20Task/Website/imgs/gallery/img/" + i + ".jpg";
console.log(imgSrc);
var imgDiv = document.createElement('div');
imgDiv.className = "img";
var descDiv = document.createElement('div');
descDiv.className = "desc";
var imgView = document.createElement('img');
imgView.src = imgSrc;
imgView.onclick = (function() {{openWebpage(imgSrc);}})();
console.log(imgSrc);
imgView.width = 300;
imgView.height = 200;
imgDiv.appendChild(imgView);
imgDiv.appendChild(descDiv);
document.getElementsByTagName('body')[0].appendChild(imgDiv);
}
The openWebpage() function in particular is this one:
openWebpage()
function openWebpage(src) {
var orig = window.document.title;
window.document.title = src;
open("imagePage.html");
}
The imagePage has a jscript which tells ITS OWN img and div tag to display the image, whose source is received from window.document.opener.title or somethign like that.
All the images get built, but the onclick() doesn't register. A peek in the developer mode in Chrome, and the images don't have an onlick() attribute.
Also, if I change this snippet of code:
imgView.onclick = (function() {{openWebpage(imgSrc);}})();
into this:
imgView.onclick = function() {openWebpage(imgSrc);};
The onlick() DOES register, but for every image simultaneously, with the src of the last image created. So when I click on Picture 1, it goes to the information of Picture 22. Same goes for every other picture. It's all the same info.
What am I doing wrong here?
EDIT: ADDITIONAL INFO
imagePage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/imagePage.css"/>
<script src="jscript/imageData.js"></script>
<script src="jscript/loadImageData.js"></script>
</head>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
<body>
<div>
<h1 id="imageTitle">TESTTITLE</h1>
</div>
<div>
<img id="imageView">
</div>
<div class="boxed" id="imageDesc">
</div>
</body>
</html>
loadImageData
window.onload = function() {
var imageSrc = opener.document.title;
var imageDesc = map[imageSrc];
var imageView = document.getElementById("imageView");
var imageDescView = document.getElementById("imageDesc");
imageView.src = imageSrc;
imageDescView.innerHTML = imageDesc;
};
On the last iteration of your loop, you set imgSrc to the url of picture 22. So on the click event your function openWebPage fires with that url in the argument.
Try this.
imgView.addEventListener("click", function() {openWebpage(imgSrc);});
I wrote some JS that lets me replace the main image on a product page with that a different image. This part is working great. However, I need the original image to return once the mouse leaves. I cannot get this to work.
Also, I would like to add a delay to this so that when I remove the mouse there is like a 1/4 second delay before changing back to the original image. This is all being done on the product page of OC 2.3.
this.imagePreview = function(){
$("a.preview").mouseleave(function(e){
$("#image").attr("src",default_image);
});
$("a.preview").hover(function(e){
$("#image").attr("src",this.rel);
});
$(document).ready(function(){
default_image = $("#image").attr("src");
imagePreview();
});
Can someone help me write this little bit of extra code? Everything else I've tried doesnt work.
You can get the desired result using JavaScript.
(function() {
var img, defaultImage, preview, i, hnd;
img = document.getElementById("image"); // Gets the image element.
defaultImage = img.src; // Sets the image src attribute to the defaultImage variable.
preview = document.querySelectorAll(".preview"); // Gets the elements with css selector is «.preview».
for (i = 0; i < preview.length; i++) {
/* Adds the mouseover event to the preview element. */
preview[i].addEventListener("mouseover", function() {
img.src = this.rel;
clearTimeout(hnd); // Reset the timeout handler.
});
/* Adds the mouseleave event to the preview element. */
preview[i].addEventListener("mouseleave", function() {
hnd = setTimeout(function() {
img.src = defaultImage;
}, 250); // 1/4 second delay.
});
}
})();
#list li {
margin: 10px;
}
<img id="image" src="https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_08-32.png" />
<ul id="list">
<li>
<a class="preview" href="#" rel="https://cdn3.iconfinder.com/data/icons/device-icons-2/512/BT_computer-32.png">Computer</a>
</li>
<li>
<a class="preview" href="#" rel="https://cdn4.iconfinder.com/data/icons/48-bubbles/48/29.Mac-32.png">Mac</a>
</li>
<li>
<a class="preview" href="#" rel="https://cdn2.iconfinder.com/data/icons/crystalproject/32x32/devices/laptop.png">Laptop</a>
</li>
</ul>
Try this code:
$("a.preview").mouseleave(function(){
setTimeout(function () {
var default_image = $("#defaultImage").attr("src");
$("#image").attr("src",default_image);
}, 3000);
});
Hi guys I have a simple rollover onmouseover effect, I have tried several scripts but none of them work, can anyone tell me why?`
javascript:
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "./images/gym-light.png";
homebuttondown = new Image();
homebuttondown.src = "./images/buttonright.png";
}
function buttondown(buttonname) {
if (document.images) {
document[buttonname].src = eval(buttonname + "down.src");
}
}
function buttonup(buttonname) {
if (document.images) {
document[buttonname].src = eval(buttonname + "up.src");
}
}
// -->
</script>
and link:
<a href="index.html" onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')">
<img id='Img4Inner' name="homebutton" src='./images/gym-light.png' alt="" />
</a>
**UPDATE 2 (last one lol) **
you currently have the onmouseout and onmouseover on the a tag, move them to the image tag and it will work:
you're code:
<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"
href="http://www.[...].com" style="height:120px;width:100px;">
<img id="Img4Inner" alt="" src="http://[..].com/images/gym-light.png" name="homebutton">
</a>
Working code:
<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"
href="http://www.[...].com" style="height:120px;width:100px;">
<img alt="" src="http://[...]/images/gym-light.png" onmouseout="buttonup(this)"
onmouseover="buttondown(this)" name="homebutton" id="Img4Inner">
</a>
Update: because you're invoking the functions on the anchor tags they need to have a height and a width similar to the following (place your height and width accordingly):
<a style="height:25px;width:25px;" href="http://www.[...].com"
onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')">
...
</a>
and I"m out...
I just used firebug, edited the HTML with the height and width and it worked fine :
)
and while I"m sure that will solve the problem.. the doctype is set to <!doctype html> and should be something like what's here (LINK)
if you would've implemented the below approach, the image would have a height and width, and since that is the image that is being targeting, might make more sense..
http://jsfiddle.net/ETHaM/2/
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "http://www.placekitten.com/100/100/";
homebuttondown = new Image();
homebuttondown.src = "http://dummyimage.com/100x100/000/fff";
}
function buttondown(obj) {
if (document.images) {
obj.src = eval(obj.name+ "down.src");
}
}
function buttonup(obj) {
if (document.images) {
obj.src = eval(obj.name + "up.src");
}
}
<a href="index.html">
<img id='Img4Inner' onmouseover="buttondown(this)" onmouseout="buttonup(this)" name="homebutton" src='http://www.placekitten.com/100/100/' alt="" />
</a>
Your code works
Here is however a more unobtrusive version
http://jsfiddle.net/mplungjan/927nN/
<a href="index.html" id="homeLink"><img
id='Img4Inner' class="hoverImg"
name="homebutton" src='http://www.placekitten.com/100/100/' alt="" /></a>
<a href="about.html" id="aboutLink"><img
id='Img5Inner' class="hoverImg"
name="aboutbutton" src='http://www.placekitten.com/100/100/' alt="" /></a>
var buttons={};
if (document.images) {
buttons["homebuttonup"] = new Image();
buttons["homebuttonup"].src = "http://www.placekitten.com/100/100/";
buttons["homebuttondown"] = new Image();
buttons["homebuttondown"].src = "http://dummyimage.com/100x100/000/fff";
buttons["aboutbuttonup"] = new Image();
buttons["aboutbuttonup"].src = "http://www.placekitten.com/100/100/";
buttons["aboutbuttondown"] = new Image();
buttons["aboutbuttondown"].src = "http://dummyimage.com/100x100/000/fff";
}
window.onload=function() {
var images = document.getElementsByTagName("img");
for (var i=0,n=images.length;i<n;i++) {
if (images[i].className=="hoverImg") {
images[i].parentNode.onmouseover=function() {
var buttonname=this.id.replace("Link","button");
document[buttonname].src = buttons[buttonname + "down"].src;
}
images[i].parentNode.onmouseout=function() {
var buttonname=this.id.replace("Link","button");
document[buttonname].src = buttons[buttonname + "up"].src;
}
}
}
}