Using JavaScript and CSS to create hovers and onclicks - javascript

I have 4 thumbnail images on the bottom of my page with a main, large image above it. I want to be able to click the thumbnail and have it load into the big image. Additionally, I want to be able to hover over the thumbnail and have a black border appear around it.
I have 40 pages that have the exact same setup (4 thumbs, 1 main image) but all different images (products). The thumbs are all in class="bottom-pic".
It seems easy enough, but perhaps I'm wrong. I'm thinking CSS for the hover, JS for the clicking? I'm VERY new to JS.
Here is the source code:
<a href=""img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo" >
<img src="images-large/cobra-dark-wood.jpg" alt="" name="photo-bottom-one" class="bottom-pic" id="photo-bottom-one">
<img src="images-large/cobra-dark-wood-one.jpg" alt="" id="photo-bottom-two" class="bottom-pic">
<img src="images-large/cobra-black.jpg" alt="" id="photo-bottom-three" class="bottom-pic">
<img src="images-large/cobra-black-one.jpg" alt="" name="photo-bottom-four" class="bottom-pic" id="photo-bottom-four">

Based on your code, and not requiring anchor tags etc, here is the JavaScript you could use.
NB: This examples assumes you are using jQuery
$(document).ready(function() {
$('.bottom-pic').on('click', function(){
$('.bottom-pic').removeClass("active"); //Removes class from all items
$(this).addClass("active"); //Adds class only to the currently clicked on item
$('#main-photo').attr('src', $(this).attr('src')); //Changes the source of the image tag
});
});
To see a working demo, I created this fiddle for you.
http://jsfiddle.net/2ZgjR/
Please note that the images don't match up because they are being dynamically loaded from a server, but the effect is exactly what you're asking for, just use this code with your images!
I also added an "active" style if you want the border to stay on the item you've clicked on. Simply add some CSS to the style .active { }
Hope this helps

Yes, I would use CSS for the border on hover. You may have to use box-sizing: border-box to make sure things don't jump around a bunch.
First, your main image should be something like this:
<a href="whatever_link">
<img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo">
</a>
Since you're using jQuery, it would be easy enough to get the switch out the source of the main image on click. Something like this:
$('.bottom-pic').on('click', function(){
var imgSrc = $(this).attr('src');
$('#main-photo').attr('src', imgSrc);
});
That's just off the top of my head. I haven't tested it.

Related

Want to change an img src on hover, then to a different src on click

I have a div which contains an img - I want to be able to have the img src change on hover (and then back again when not hovered), but also have the same img change to a different src altogether when it is clicked (and then back again upon second click). So far I have the J-Query code to make it change on hover:
HTML
<div class="tab_box">
<img id="img1" src="tab.png">
</div>
J-QUERY
$(document).ready(function(){$('#img1').hover(function(){$(this).attr('src','tabt2.png')},function()
{$(this).attr('src','tab.png')}) });
But I am unsure how to then make the change to a different src altogether if clicked (as the image will have to be being hovered over to click it!) Can anyone suggest? For various re-sizing reasons, I want to keep the image as a stand alone image within the div, instead of having it as a background-image of the div, if possible
You can use the .hover() and .click() functions of Jquery. What you have used has syntax problems
Here is the correct code:
$('#img1').hover(function () {
$(this).attr('src', 'http://www.fateheducation.com/fatehnew/Testimonial_Image/avatar-small.png');
});
$('#img1').click(function () {
$(this).attr('src', 'http://moduleoff.com/sites/all/themes/moduleoff/images/xdruplicon_rotated_small.png.pagespeed.ic.Xl8nCuL4lR.png')
});
Working Fiddle

why image display below when click on image in Jquery?

can you please tell me why my image display below when I click the thumb nail image.I am using lightbox plugin I study doc from here
https://github.com/lokesh/lightbox2/
In example it show image above the image..which css file I am missing ?
fiddle
http://jsfiddle.net/xnhtg1t1/
<a class="example-image-link lightbox" href="https://dl.dropboxusercontent.com/s/51wtwmqnnokotj6/image-1.jpg?dl=0" data-lightbox="example-1"><img class="example-image" src="https://dl.dropboxusercontent.com/s/w85pcbopymjzn76/thumb-1.jpg?dl=0" alt="image-1" /></a>
Remove the GET variable ?dl=0 from your JS and CSS urls and it works. jsFiddle Demo
That is Dropbox's download parameter, while although it is set to false.. it is still causing the issue.
Make position of the Lightbox absolute instead of relative.
.lightbox {
position: absolute;
}
Or even FIXED. And then it will appear on top of the page. Then you can construct the lightbox styles however you like.
http://jsfiddle.net/xnhtg1t1/2/

Change large image in gallery onmouse over of thumbnails

I currently have a gallery that changes the larger image when the smaller is clicked. Here is the most important code:
.n1:focus span
{
background: url('images/Boot.png')
}
Then
<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>
I can't figure out how to make this happen onhover or onmouseover.
Here is an example of what I need: http://thelittleappfactory.com/ripit/
Does anyone have any insight? I tried using javascript to open the link onmousehover, but my browser saw it as a popup.
First of all you need to have a thumbnail and a big version of your images. In your code you seem to have a single image. The big images should be hidden with css display:none and absolutely positioned so they will all be on top of each other. I would use jquery's mouseenter and mouseleave events. mouseover event is triggered when the cursor moves over an element and will generate too many calls.
<div class="item n1">
<img class="thumb" src="images/boot_thumb.png" alt="boot/>
<img class="big" src="images/boot_big.png" alt="boot/>
</div>
This javascript code would do the trick:
$('item').mouseenter(function(){
$(this).children('big').fadeIn();
});
$('item').mouseleave(function(){
$(this).children('big').fadeOut();
});
I actually found a way to do this with pure CSS. I thought it was pretty phenominal, because I was told that was impossible and there seems to be need for it. Here's source code for this technique:
http://ostmosis.com/OnHoverChangeImage.zip

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

Using JavaScript to overwrite an image and replace with a new one on the same page

I have a image scroller displaying thumbnails and another area where an enlarged picture of the thumb nail is displayed. I'm trying to use javascript to overwrite the large image when a different thumb nail is clicked. so clicking the thumb nail will replace the current large image with the new large image of the thumb nail, promblem is there is 31 thumb nails and i cant find a way to overwrite them using the show hid div method shown here.
You don't need to hide/show divs. Just change the src attribute of the larger image each time a different thumbnail is clicked. That should get you want you want.
<script type="text/javascript">
function showLarge(srcLarge)
{
document.getElementById("large").src = srcLarge;
}
</script>
<img src="/path/to/thumb1.jpg" onclick="showLarge('/path/to/large1.jpg')"/>
<img src="/path/to/thumb2.jpg" onclick="showLarge('/path/to/large2.jpg')"/>
<img src="/path/to/thumb3.jpg" onclick="showLarge('/path/to/large3.jpg')"/>
<img id="large" src="/path/to/large1.jpg"/>

Categories