I am new to jquery and javascript. I want some picture in a div to change on click on another picture. I did look around here and found something similar to what i want but can't seem to make it work.
Here is my code:
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
</script>
</HEAD>
<BODY>
<div id="imageBox"><img src=placeholder.jpg></div>
<BR>
<img class="thumb" src="image1-thumb.jpg" />
<img class="thumb" src="image2-thumb.jpg" />
<img class="thumb" src="image3-thumb.jpg" />
</BODY>
</HTML>
You can see it life here: http://www.thebruises.be/TEST/test.html
But as I said above it doesn't work; tried moving the ... inside the body but doesn't change anything.
Any help would be appreciated ... and as I mentionned above I has zero javascript/jquery skills.
Thx
you're using the same id for all <a> tags. an ID has to be unique within the page your javascript is applying the on click function only to the first image
change id to class and your code should work
your code should look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
</script>
...
<img class="thumb" src="image1-thumb.jpg" />
<img class="thumb" src="image2-thumb.jpg" />
<img class="thumb" src="image3-thumb.jpg" />
Change your id="changeImage" to class="changeImage" since id is unique.
Then you can use each to iterate over all of your anchors with class changeImage:
$('.changeImage').each(function() {
$(this).click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '.jpg');
})
});
Copy and paste this to your jQuery code:
$(document).ready(function(){
$('.changeImage').each(function() {
$(this).click(function(){
var rel = $(this).attr('rel');
$("#imageBox img").attr('src', 'image' + rel + '-thumb.jpg');
})
});
});
Demo
Related
i have used the following code for image slider. and how can i set the link to each images
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body>
</html>
please tell how to add link to each images
You can do like your image src.
use .setAttribute('href', "yoururl"); for set a html attribute with JS.
Add a link around your images and change the href attribute.
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
var link = document.getElementById("mylink");
//change the image
if(!imageID){
document.getElementById("myimage").src="1.png";
link.setAttribute('href', "url1");
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="2.png";
link.setAttribute('href', "url2");
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="3.png";
link.setAttribute('href', "url3");
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="mylink" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a>
</div>
</body>
</html>
You can also use if-else-if instead of nested if-else statements. This works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="https://pixabay.com/static/uploads/photo/2015/08/14/08/29/images-888133_960_720.jpg";
document.getElementById("link").href = "url1";
imageID++;
}
else if(imageID==1){
document.getElementById("myimage").src="http://eyespired.nl/wp-content/uploads/2013/09/bronzen-beelden-matteo-pugliese-607x458.jpg";
document.getElementById("link").href = "url2";
imageID++;
}else if(imageID==2){
document.getElementById("myimage").src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg";
document.getElementById("link").href = "url3";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
<a id="link" href="#">
<img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
</a></div>
</body>
<div id="companyLogo"></div>
<script type = "text/javascript">
var imageName = prompt("Client Logo Image:");
$('#companyLogo').html(<img src = imageName, style="-webkit-filter: invert(100%);">);
</script>
I am trying to get imageName to be the source for the "img src" tag. Any help is greatly appreciated. Thanks!
try this.
in the begining :
<div id="companyLogo">
<img src="" id="#companyImg" style="display:none;" />
</div>
On some event the prompt box is displayed to the user
<script>
$(document).ready(function(){
var imageName = prompt("Client Logo Image:");
$("#companyImg").attr('src', 'your image path' + imageName);
$("#companyImg").css('display','block');
});
</script>
It's a better practice to keep your javascript away from your html. So you could create an html document like so:
<!DOCTYPE html>
<html>
<body>
<img id="companyLogo" src="path/to/some/default.img" alt="Your Company Logo" />
<script>
//prompts user for input
var imgSrc = prompt("Please input name");
//changes src of the targeted image to the value input by the user
document.getElementById("companyLogo").src = imgSrc;
</script>
</body>
</html>
Here is a fiddle
I'm dealing with the jquery Missing Manual (O'Reilly) tutorial of page 215.
Given this HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#gallery img {
display: inline-block;
margin: 10px;
border: 1px solid rgb(0,0,0);
}
</style>
<script src="../_js/jquery.min.js"></script>
<script src="my_scripts/rollover.js"></script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>Rollover Images</h1>
<p>Mouse over the images below</p>
<div id="gallery"> <img src="../_images/small/blue.jpg" width="70" height="70" alt="blue"> <img src="../_images/small/green.jpg" width="70" height="70" alt="green"> <img src="../_images/small/orange.jpg" width="70" height="70" alt="orange"> <img src="../_images/small/purple.jpg" width="70" height="70" alt="purple"> <img src="../_images/small/red.jpg" width="70" height="70" alt="red"> <img src="../_images/small/yellow.jpg" width="70" height="70" alt="yellow"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
The tutorial is asking me to rollover the "large" images onto the small ones shown when the page initially loads.
The book proceeds in completing the forementioned task using a regular expression trick.
I don't want to complete this tutorial in the suggested way and I tried to figure out how I can perform the image rollover correctly by only using the replaceWith function inside the hover function.
I came up to this script (rollover.js):
$(document).ready(function() {
$('#gallery a').each(function(){
if ("$(this)[href*='large']" ){
$('<img>').attr('src',$(this).attr('href'));
}
});
$('#gallery img').each(function(){
var $oldimage = 0;
$(this).hover(
function(){
$oldimage = $(this).replaceWith('<img src=' + $(this).parent().attr('href') + '>');
console.log('old image' + $oldimage);
}
,
function(){
$(this).replaceWith('$oldimage');
console.log('comeback' + $oldimage);
});
});
}); // end ready
The result is that the first part (mousenter) of the hover function is correctly performed, but the second part (mouseleave) of the hover function seems to not be executed at all, even the console.log.
The problem is caused by what you're doing in the first handler. In using replaceWith, you are altering the DOM (specifically the img element you have bound the hover event to) and affecting the event bindings in place.
Instead of using replaceWith, you should use the attr function to update the image src attribute.
EDIT
Try this, for example: http://jsfiddle.net/3dr7n8b7/1/
try this:
$(document).ready(function() {
$('#gallery a').each(function(){
if ("$(this)[href*='large']" ){
$('<img>').attr('src',$(this).attr('href'));
}
});
$('#gallery img').each(function(){
var $oldimage = 0;
$(this).on('mouseover',
function(){
console.log($(this));
$oldimage = $(this).attr('src');
$(this).replaceWith('<img src=' + $(this).parent().attr('href') + '>');
// $('#gallery img').each(function(){
$(this).on( "mouseleave", function(){
$(this).replaceWith('<img src=' + $oldimage + '>');
console.log('comeback' + $oldimage);
});
// });
console.log('old image' + $oldimage);
});
});
}); // end ready
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>
img src tag
i want, when click on image the source of the image in javascript variable
i want to use the src in javascript
var imageSource = document.getElementById ( "yourimageid").src;
A sample one
<script type="text/javascript">
function GetSrc(elem)
{
alert ( elem.src );
}
</script>
<img src="images/yourimage.extn" id="img1" onclick="GetSrc(this);" />
<img src="image.png" id="image" alt="image">
<script type="text/javascript">
alert(document.getElementById('image').src);
</script>
This will alert the src of the element with the id 'image'
Also you can use document.getElementById("[elementName]").getAttribute("src") and setAttribute..