I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.
Related
I am trying to change an image using jquery upon clicking. So when I click on an image it appears on the viewport then I click on another image above it and it changes to that image and then a third. When I try it only clicks on one image.
HTML CODE:
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
<p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
<p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>
<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>
jQuery Code:
$("#vacationimages", "src").click(function(){
$("#firstname").text("");
$("#bigimage").show("slow");
var myfirst = $("#firstname").val();
$("#currentimage").attr("src", "ocean.jpg");
$("#currentimage").attr("src", "desert.jpg");
Only the 2nd image displays despite me having different images on the same page.
Use "on" vs. "click" because it will then work for dynamically added elements, and save you headaches later. After that it's simply populating the image properties with those you gathered from the clicked image or $(this) in the scope of your function.
$(function() {
$("#vacationimages img").on("click", function() {
$("#currentimage").attr("src", $(this).attr("src"));
$("#imagedesc").html($(this).attr("alt"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<img src="http://fillmurray.com/30/30.jpg" alt="Mountain Vacation">
<img src="http://fillmurray.com/32/32.jpg" alt="Desert Vacation">
<img src="http://fillmurray.com/34/34.jpg" alt="Ocean Vacation">
</div>
<div id="bigimage">
<img id="currentimage" src="" alt="">
<p id="imagedesc"></p>
</div>
Another common approach in a scenario like this is to use an anchor tag around the img (<a>) and populate it's rel attribute with a larger source image, if what you're going for is click a thumbnail to view a larger image. In that case you bind the event listener to the anchor (not the image) and change the src to the anchor's rel (as opposed to the src of the img inside the anchor).
$("#vacationimages img").on("click",function(){
$("#bigimage img").attr("src",$(this).attr("src"));
$("#bigimage p").text($(this).attr("alt"));
});
$("#submitme").on("click",function(){
$("#mymessage").text($("#name").val()+" You want a "+$("#imagedesc").text());
});
img
{
height:32px;
width:32px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<label>Name:<input type="text" id="name"></label><br><br>
<img src="https://image.flaticon.com/icons/png/128/181/181549.png" alt="Mountain Vacation"><img src="https://image.flaticon.com/icons/png/128/148/148766.png" alt="Desert Vacation">
<img src="https://image.flaticon.com/icons/png/128/138/138662.png" alt="Ocean Vacation">
</div>
<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>
<br><br>
<div id="submitdiv"> <input id="submitme" type="button" value="Submit ME"> <p id="mymessage"></p> </div>
I'm trying to display a div by clicking on an image. the div will contains an image or a video.
I will have several images to click on with content attached.
with my actual JS, all div are displayed when cliking on the image.
I use Custom Fields to enter my images and iframe so my code need to be dynamic.
I don't know how to fix it.
Also in my actual code the div disapear when clicking outside of it, I would like to add a text link over to close it when clicking on it.
here is mu JS :
$(document).ready(function(){
$(".mix").click(function(){
$(".photos_overlay").toggle();
});
});
My Html :
<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
and my CSS :
.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}
here is JSfidlle to see it in action : http://jsfiddle.net/aaWLJ/12/
can anybody help me with this ?
Thanks a lot for your help,
I have modified your code a little:
HTML
<br />
<div class="mix photos" data-myorder="20140307">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
As you can see I have added a parent div elements for both overlays and a div CloseMe
Also I have changed some CSS (You can change it to what ever you want, I just want to show you the main idea how to resolve your issue):
.photos_overlay{
width:967px;
height:384px;
background-color:black;
position:absolute;
top:20px; /* I have changed top position just to show the div 'CloseMe'*/
left:0;
display:none
}
And the JavaScript Code
$(document).ready(function(){
$(".mix").click(function(){
ShowHide($(this));
});
$(".closeFrame").click(function(){
ShowHide($(this));
});
function ShowHide(elem){
var $mix = $(elem);
$mix.children(".closeFrame").toggle();
$mix.next(".photos_overlay").toggle();
}
});
I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.
I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});