Multiple Roll Over Images - javascript

Is it possible to put an image onto a webpage that changes depending where the cursor is?
Current Code:
<body onload="MM_preloadImages('Images/Home.png')">
<div class="HeaderWrapper">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Image2" width="1300" height="150" border="0" id="Image2" />
</a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Home" width="1300" height="150" border="0" id="Home" />
</a>
</div>
I was thinking it could be modified some how to use this?
<area shape="rect" coords="434,54,495,83" href="index.php" target="index.php" alt="index" />

Search how to respond to the hover event.
Search how to toggle a CSS class on an HTML element.
When the image is hovered, toggle the class of the HTML element such that a different CSS class is used. This different CSS class will have a different image.
It might be easier to use jQuery for this.

Related

Image to act as a button HTML

Hello I have this code:
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">Content of popup</div>
And I have this image:
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
</a><a href="tecnologia.html">
I want to know how to change the link on that image to do the same the button does, whats the syntax that I should use, so whenever I click the image it'd trigger the button action and remove the button itself
Thanks
<img onclick="document.getElementById('my-button').click()" src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
or
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
You can use input type="image"
<input type="image" src="submit.gif" alt="Submit">

hide URL in status for all hyperlinks

In my page I inserted a PrettyPhoto gallery.
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image01.jpg'">
<img src="image01.jpg" width="200px" />
</a>
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image02.jpg'">
<img src="image02.jpg" width="200px" />
</a>
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image03.jpg'">
<img src="image03.jpg" width="200px" />
</a>
I used onClick event to hide URL in status bar. But, when I try to visualize the photo gallery I view only clicked image.
How it's possible to resolve this problem?
I don't think setting the href like this will work, try location.href instead

how to prevent image wrap in responsive mode

how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit
If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/
Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.

Replace Image SRC On CLick

I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.

Image swap onclick within div

I would like to replace images on click but also have the replaced image click to a lightbox. Here is my example where the first image has the lightbox: http://www.artdesigngroup.co/products/test.html
My thought is that I need to apply the "display" ID on the surrounding div and replace the images within this div. But how do I do this and create the lightbox?
Thank You.
I would rethink your structure for handling this. Most of what you are doing can be handled with straight jQuery instead of rolling your own swap functions. When you ask your questions, including a Fiddle is a great way to get an answer faster. Note that I am using jQuery 1.7's prop method here which you should be using instead of attr.
http://jsfiddle.net/txbqX/3/
jQuery to get what you want
//when main image is clicked, show it in colorbox
$('#foo a').colorbox();
//when thumb is clicked, set main image to it
$('div#thumbs img').click( function() {
$('#foo a').prop('href', $(this).prop('src'));
$('#foo img').prop('src', $(this).prop('src'));
return false; //stop link from navigating
})
Simplified HTML
<div id="foo" >
<a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display" />
</a>
</div>
<br />
<div id="thumbs">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" />
</div>

Categories