Trouble executing an event - javascript

Updated External JS Sheet Code Below
I am attempting to execute a simple photogallery. The task for my class is to hover over a small image and have the alt text and image displayed in the larger box and when the mouse leaves the text the background image should display as they were originally
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
<script src = "js/gallery.js"></script>
</head>
<body>
<div id = "image">
Hover over an image below to display here.
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">
</body>
</html>
and here is my (broken) external Javascript sheet:
function upDate(PreviewPic){
var imageLarge= document.getElementById('image');
document.getElementById('image').innerHTML = PreviewPic.alt;
document.getElementById('image').backgroundImage =imageLarge.src;
}
function unDo(){
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}

this one works vanilla js and i commented a lot of the stuff, you said you're doing it for a class if its a coding class hopefully this helps you learn.the code snipit works but is not styled in a good way so try it out in your editor with you're css.
//grabing the ellements by id
var imgOne = document.getElementById("img1");
var imgTwo = document.getElementById("img2");
var imgThree = document.getElementById("img3");
var displayText = document.getElementById("displayText");
var displayImg = document.getElementById("displayImg");
//add eventlisteners to events
//this can be done in the html; but i prefer it in the javaScript
// event listeners for first img
imgOne.addEventListener("mouseover", function () {
displayImg.src = imgOne.src;
displayText.innerHTML = imgOne.alt;
});
// to replace
imgOne.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listeners for second img
// adds the stuff
imgTwo.addEventListener("mouseover", function () {
displayImg.src = imgTwo.src;
displayText.innerHTML = imgTwo.alt;
});
// reverts stuff
imgTwo.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listener for third img
imgThree.addEventListener("mouseover", function () {
displayImg.src = imgThree.src;
displayText.innerHTML = imgThree.alt;
});
imgThree.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<div id = "image">
<!-- you could create a text node and append it rather than adding a p tag
but hard codeing it is a little easier -->
<img src="" alt="" id="displayImg">
<p id="displayText">Hover over an image below to display here.</p>
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" id="img1">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" id="img2">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" id="img3">
<!-- i moved the script to the bottom so that you're html will load before the js
this can prevent some "can not get/append/set ****** to undefined" errors.
(i've heard either way is fine but this just the way i learned)-->
<script src="main.js"></script>
</body>
</html>

The updated javascript, I hope this works because I have not tested it:
function upDate(PreviewPic){
var imageLarge = document.getElementById("image");
imageLarge.innerHTML += '<img src="'+PreviewPic.src+'">';
imageLarge.innerHTML += PreviewPic.alt;
}
function unDo(){
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}
the upDate function will use the (this) value of the onmouseover="", the this element will be the PreviewPic, this variable will be used to insert the src and alt into the #image element. I have not edited the unDo function, this will reset the innerHTML of the #image element.

I used angular, witch is over kill; but it works and you could easily add more images. :)
var app = angular.module("MainApp", []);
app.controller("mainController", ["$scope", function($scope) {
$scope.display = {};
$scope.album = [{
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg",
name: "Styling with a Bandana"
}, {
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG",
name: "With My Boy"
}, {
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg",
name: "Young Puppy"
}];
$scope.newDisplay = function(item) {
$scope.display = item;
}
}]);
div.gallery {
box-sizing: border-box;
width: 33%;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="main.css">
<!-- <link rel="stylesheet" href="css/gallery.css">-->
</head>
<body ng-controller="mainController">
<div class="display" ng-model="display">
<img ng-src="{{ display.img }}" alt="">
<h1>{{ display.name }}</h1></div>
<div class="gallery" ng-repeat="item in album" ng-mouseover="newDisplay(item)">
<img ng-src="{{ item.img }}" alt="">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

Related

How to preload images in JavaScript

I need some help preloading images in javascript, here is my code right now. I have to preload the images and then attach a mouseover and mouseout event to them, but preloading is really the only problem I am having right now.
"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;
// attach mouseover and mouseout events for each image
image1.onmouseover = function() {
"images/release.jpg";
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};
Blockquote
Here is the HTML
<!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" id="catch" title="Catch and
Release"></a></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>
`
You can do that binding the event onload
image2.onload = function(){
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
}
If you want to wait for all images to load you can do it with jQuery
$(window).on("load", function() {
//This will be executed when every single DOM element is loaded
}

Uncaught TypeError: Cannot read property 'src' of undefined at displayFull

I am having trouble with this homework assignment and I have been stuck on it for a while. I am getting an error message saying
Uncaught TypeError: Cannot read property 'src' of undefined at
displayFull
Any idea to fix this?
The image folders and files are in the same folder, so the src is right.
HTML
<!DOCTYPE html>
<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>
<head>
<meta charset = "utf-8">
<title>Deitel Book Cover Viewer</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "coverviewer.js"></script>
</head>
<body>
<div id = "mainimg">
<img id = "imgCover" src = "fullsize/jhtp.jpg" alt = "Full cover image">
</div>
<div id = "thumbs"> // I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
<img src = "thumbs/jhtp.jpg" id = "jhtp" alt = "Java How to Program cover" onclick = "displayFull('jhtp');">
<img src = "thumbs/iw3htp.jpg" id = "iw3htp" alt = "Internet & World Wide Web How to Program cover" onclick = "displayFull('iw3htp');">
<img src = "thumbs/cpphtp.jpg" id = "cpphtp" alt = "C++ How to Program cover" onclick = "displayFull('cpphtp');">
<img src = "thumbs/jhtplov.jpg" id = "jhtplov" alt = "Java How to Program LOV cover" onclick = "displayFull('jhtplov');">
<img src = "thumbs/cpphtplov.jpg" id = "cpphtplov" alt = "C++ How to Program LOV cover" onclick = "displayFull('cpphtplov');">
<img src = "thumbs/vcsharphtp.jpg" id = "vcsharphtp" alt = "Visual C# How to Program cover" onclick = "displayFull('vcsharphtp');">
</div>
</body>
</html>
JAVASCRIPT
var fullpic = new Array(6);
//define each array element as an image
for (var i=0;i<fullpic.length;i++)
fullpic[i] = new Image(289,373);
//give the path to the src properties of the array elements
fullpic[0].src = "fullsize/jhtp.jpg";
fullpic[0].alt = "Java How to Program";
fullpic[1].src = "fullsize/iw3htp.jpg";
fullpic[2].src = "fullsize/cpphtp.jpg";
fullpic[3].src = "fullsize/jhtplov.jpg";
fullpic[4].src = "fullsize/cpphtplov.jpg";
fullpic[5].src = "fullsize/vcsharphtp.jpg";
/*function displayFull(title){
document.getElementById("imgCover").src="fullsize/"+title+".jpg";
}*/
function displayFull(i){
document.getElementById("imgCover").src=fullpic[i].src; // I AM GETTING THE ERROR MESSAGE HERE
}
To make it cleaner and readable, You can just do something like this as mentioned below. All you need is , have all the images under in your markup.
window.onload = function() {
document.querySelector("#thumbs").addEventListener("click", function(event) {
if (event.target.tagName.toLowerCase() === "img") {
var title = event.target.getAttribute("id"),
imgSrc = "fullsize/" + title + ".jpg",
imgElement = document.querySelector("#imgCover");
imgElement.src = imgSrc;
imgElement.alt = imgSrc;
}
});
}
<!DOCTYPE html>
<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>
<head>
<meta charset="utf-8">
<title>Deitel Book Cover Viewer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="coverviewer.js"></script>
</head>
<body>
<div id="mainimg">
<img id="imgCover" src="fullsize/jhtp.jpg" alt="Full cover image">
</div>
<div id="thumbs">// I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
<img src="thumbs/jhtp.jpg" id="jhtp" alt="Java How to Program cover">
<img src="thumbs/iw3htp.jpg" id="iw3htp" alt="Internet & World Wide Web How to Program cover">
<img src="thumbs/cpphtp.jpg" id="cpphtp" alt="C++ How to Program cover">
<img src="thumbs/jhtplov.jpg" id="jhtplov" alt="Java How to Program LOV cover">
<img src="thumbs/cpphtplov.jpg" id="cpphtplov" alt="C++ How to Program LOV cover">
<img src="thumbs/vcsharphtp.jpg" id="vcsharphtp" alt="Visual C# How to Program cover">
</div>
</body>
</html>

Clickable event in JavaScript in orde to display an image

So I have a photo gallery that contains photo's in a thumbnail, and one big image. When the user clicks the thumbnail, it should display the thumbnail image larger. Everything else is done but I can't get the JS to work. I know it's something small, so can someone take a look at and see what I am doing incorrectly? Thank you in advance.
<html>
<head>
<title></title>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link rel = "stylesheet" href = "html5reset.css">
<link rel = "stylesheet" href = "gallery.css">
</head>
<body>
<div class = "main">
<div class = "wrapper">
<div id = "largeImage">
<img src = "images/machine_1.jpg" alt = "machining image" width = "920" height = "400" id = "bigImage" class = "border"/>
</div>
<div class = "thumbnail">
<img src="images/machine_1.jpg" alt = "machining lathe" id="machine_1"/>
<img src="images/machine_2.jpg" alt = "machining lathe" id="machine_2"/>
<img src="images/machine_3.jpg" alt = "machining lathe" id="machine_3"/>
<img src="images/machine_4.jpg" alt = "machining lathe" id="machine_4"/>
<img src="images/machine_5.jpg" alt = "machining lathe" id="machine_5"/>
<img src="images/machine_6.jpg" alt = "machining lathe" id="machine_6"/>
</div>
</div>
</div>
<script src = "gallery.js"></script>
</body>
</html>
function imgFunction() {
var bigImage = document.getElementById("bigImage");
var thumbnail = document.getElementById("thumbnail");
thumbnail.addEventListener("click",function(event) {
if (event.target.tagName == "IMG") {
bigImage.src = event.target.src;
}
},false);
}
window.addEventListener("load", imgFunction, false);
I think you want to select your <div class="thumbnail"> but you use getElementById.
So just give your div the id: <div id="thumbnail">.
JQuery Weave: http://kodeweave.sourceforge.net/editor/#3aa0ea4a91d84cfd35f0b8b4151499bc
Plain JS Weave: http://kodeweave.sourceforge.net/editor/#21d2b4bd5fa4c388d7e63c34ea23f4cd
Your main problem is you're calling document.getElementById("thumbnail") and no #thumbnail exists in your html.
So either change...
document.getElementById("thumbnail")
to
document.querySelector(".thumbnail")
or
to
<div id="thumbnail">
Here's a JQuery solution.
var thumbnail = document.querySelector('.thumbnails');
var preview = document.querySelector('.preview');
thumbnail.addEventListener("click", function(e) {
if (e.target.tagName == "IMG") {
preview.src = e.target.src;
}
}, false);
.gallery {
text-align: center;
}
.preview {
width: auto;
max-width: 100%;
}
.thumbnails {
white-space: nowrap;
overflow: auto;
}
.thumbnails img {
cursor: pointer;
height: 70px;
}
<div class="gallery">
<img src="http://www.catersnews.com/wp-content/uploads/2015/06/1_CATERS_BEAR_HANDSHAKE_07-800x498.jpg" class="preview">
<div class="thumbnails">
<img src="http://www.catersnews.com/wp-content/uploads/2015/06/1_CATERS_BEAR_HANDSHAKE_07-800x498.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/736x/9a/44/23/9a4423324fe1fcc23c436a91ad4c9667.jpg">
<img src="http://www.earthtouchnews.com/media/734889/Baby_bears_2014-11-25.jpg">
<img src="http://i.imgur.com/wYFHJNI.jpg">
</div>
</div>

change thumbnail image for main image

do i have a syntax error? , could it be that im using notepad++?
nothing is happening when i click a thumbnail image
i am new to javascript so that may be the case.
my general idea was to create an event "changeimage" that onclick would change the source of my main image for my thumbnails image to make it bigger.
<head>
<script type="text/javascript">
function changeimage(event)
{
event = event;
var targetElement = event.target;
if (targetElement.tagName == "IMG")
{
document.getElementbyid("Main").src = targetelement.getattribute("src");
}
}
</script>
<meta charset="utf=8">
<style>
#Main
{
height:540px;
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img id="Main" src="img/rickroll1.jpg" </img>
<br />
<div id="thumbnail" onclick="changeimage(event)">
<img class="imgthmb1" src="img/rickroll1.jpg" />
<img class="imgthmb1" src="img/rickroll2.jpg" />
<img class="imgthmb1" src="img/rickroll3.jpg" />
<img class="imgthmb1" src="img/rickroll4.jpg" />
<img class="imgthmb1" src="img/rickroll5.jpg" />
</div>
</body>
</html>
Yes, you have a syntax error:
targetElement is spelled targetelement in the following line:
document.getElementbyid("Main").src = targetelement.getattribute("src");
Change it to the following:
document.getElementbyid("Main").src = targetElement.getattribute("src");
On a related note, the following line is extraneous and can be removed:
event = event;
Javascript is case-sensitive.
in place of
document.getElementbyid("Main").src = targetelement.getattribute("src");
write
document.getElementbyId("Main").src = targetElement.getAttribute("src");
Also your html markup has an error:
<img id="Main" src="img/rickroll1.jpg" </img>
should be
<img id="Main" src="img/rickroll1.jpg">

jquery preloaded imgages with rollovers

So I am doing something very basic that can be done with CSS but I want to do it with jQuery to get familiar with the library.
I am trying to create a rollover image gallery. Where when you put the mouse over the image it will be swapped with a slightly edited version of it.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery</title>
<script src="jquery-1.9.1.js"></script>
<style>
</style>
</head>
<body>
<div id="gallery">
<img src="images/one_s.jpg" />
<img src="images/two_s.jpg" />
<img src="images/three_s.jpg" />
<img src="images/four_s.jpg" />
<img src="images/five_s.jpg" />
<img src="images/six_s.jpg" />
</div>
<script>
$(document).ready(function(){
var alternate = ['images/one_s_edited.jpg',
'images/two_s_edited.jpg',
'images/three_s_edited.jpg',
'images/four_s_edited.jpg',
'images/five_s_edited.jpg',
'images/six_s_edited.jpg'];
var $selection = $("#gallery img");
for(var i = 0; i < alternate.length; i++)
{
var imgObject = new Image();
var downloadedImg = imgObject.src = alternate[i];
console.log(downloadedImg);
var originalSrc = $selection.eq(i).attr("src");
console.log(originalSrc + "\n");
$selection.eq(i).hover(
function(){
$(this).attr("src", downloadedImg);
},
function(){
$(this).attr("src", originalSrc);
}
);//End hover
}//End loop
});//End ready
</script>
</body>
</html>
Here is a link to the final result: link
As you can see it rolls over but not as planned. It ends up with the last rollover-image and doesn't change back to the original nor does it show the appropriate rollover image that corresponds with it.
Any simple suggestions without using regular expressions?
The problem is the wrong usage of a closure variable in a loop.
But the solution can be simplified to
$(document).ready(function () {
var $selection = $("#gallery img");
$selection.hover(function () {
this.src = this.src.replace('.jpg', '_edited.jpg')
}, function () {
this.src = this.src.replace('_edited.jpg', '.jpg')
})
}); //End ready

Categories

Resources