display a different, larger photo on mouseover - javascript

Usually i'm here for help with a JavaScript class that I just started, but this on is for a personal project that I'm working on. I have code (see below) that will increase the size of a photo on mouse-over, and it works fine.
Problem is, I want to not only display a larger image but for one of these I'd like to also display a different image completely on mouse-over (and yes, still at a larger size too!).
This is what I've been working with but can't seem to get it to work correctly (the first image is a "before", and the second is an after Photoshop enhancement with both before/after side by side). Any help is greatly appreciated. Thanks...
<p><img class="displayed" src="Images/sheriffcarB4.jpg" width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src=Images/sheriffcarcompare.jpg" "this.width=1100;this.height=350;"onmouseout="this.width=250;this.height=150"/></p></div>

Maybe something like this?
<div>
<p><a href="" target="blank"><img class="displayed" src="Images/sheriffcarB4.jpg"
width="250" height="150" alt="Photoshop Enhancement" onmouseover= "this.src='Images/sheriffcarcompare.jpg';this.width=1100;this.height=350;" onmouseout="this.width=250;this.height=150"/></a>
</p>
</div>
WORKING DEMO
In the Demo wait for a secong over you hover over the image for the image src to change. This happens only because the src is a 3rd party website. It will work perfectly in your case

You can do this without using javascript at all... The :hover CSS selector is similar to the onmouseover javascript event.
<style>
a img.Large { display: none; }
a:hover img.Small { display: none }
a:hover img.Large { display: block; }
</style>
<a href="your link">
<img class="Small" src="Images/sheriffcarB4.jpg"
width="250" height="150"
alt="Photoshop Enhancement" />
<img class="Large" src="Images/sheriffcarcompare.jpg"
width="1100" height="350"
alt="Photoshop Enhancement" />
</a>

See this Fiddle
Html
<a href="#">
<img class="actul" src="http://t2.gstatic.com/images?q=tbn:ANd9GcTjlz0eYHrzmEgWQ-xCtzyxIkA6YoZHpG0DnucD1syQXtTLyoZvuQ" width="400" height="300"
alt="picSmall" />
<img class="another" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT7cjWFiYeCohI7xgGzgW60EHd-kEJyG3eNEdJJhnhp7RFT6o6m" width="600" height="350"
alt="picLarge" />
</a>
Css
a img.another { display: none; }
a:hover img.actul { display: none }
a:hover img.another { display: block; }

Related

resize blogger image widget according to screen size

I've the following code to display some images side by side in a blogger blog but I'm facing the display size issue
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="0">
<tr>
<td><a href="URL" target="_blank" title="pic1">
<img height=200 width=120 src="IMAGE LINK" alt="pic name" style="border:none;"/></a></td>
<td><a href="URL" target="_blank" title="pic2">
<img height=200 width=120 src="IMAGE LINK" alt="pic name" style="border:none;"/></a></td>
</tr>
</table>
</div>
The problem is that if I put more than 2 images in a row or not reduce the width of the images in the above code, the images won't fit on screen while using a small screen device like mobile devices. It works fine on computer browsers because there's enough space for the images to fit.
What I want to do here is that, I want to display more than 2 images in a row and on mobile devices, it should be auto arranged. What i meant is that, let's say I put 6 images in the above code, on mobile devices, I want to display two images in a row, the next two images under it and so on(like tiles). Right now when I use the above code and check the blog on mobile, I can see only the first image displayed properly and half of the second image. Third image is not visible at all. I want all the images to have same width and height and if the screen doesn't have enough space to display an image in the same row, it should be moved to the next line automatically. How can I do this?
I'm assuming that the height:width ratio you are using reflects that of the original image, and thus only specifying width. The image will be 100% of its parent, the a element. You can control it further by specifying the width, position, etc. of the nobrtable element.
<style type="text/css">
.nobrtable a { display: block; float: left; width:50%; max-width:120px; }
.nobrtable img { border:solid 1px black; float:left; width: 100%; }
</style>
<div class="nobrtable">
<a href="URL" target="_blank" title="pic1">
<img src="IMAGE LINK" alt="pic name" />
</a>
<a href="URL" target="_blank" title="pic2">
<img src="IMAGE LINK" alt="pic name" />
</a>
</div>

Change image on mouse over

<img onmouseover="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
Its not working. It comes up as a box, not a broken image but a box which doesn't display the image. I'm adding it to my website, could i be putting it in the wrong place? Also, i put it in my forum wrapper and i want the image to be displayed and when you hover your mouse over it so it changes to image 2 please help.
If you intend the image to change on mouseover, you can use this:
<img onmouseover="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png'"
onmouseout="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png'"
src="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
this.src='something'
will set the image src to something.
However, it would be prettier to use CSS and have it as background image, then it will work without javascript.
Please use some CSS, that inline style code gets so confusing.
If you want to do it the nice way do something like this:
#facebook {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png") no-repeat;
width: 231px;
height: 231px;
margin-top: -12px;
margin-right: -60px;
}
#facebook:hover {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png") no-repeat;
}
<div id="facebook"></div>
This may not be right but from looking at your code your img script doesnt end.
You need to have />

Safari Resizes SVG after hover when using jQuery Rollover Data Attribute

This seems to be a Safari exclusive bug, and I can't seem to find any information on why it might even be happening.
It's only on Safari, and only using SVG.
I am using the Data Attribute rollover technique using jQuery.
$("img.rollover").hover (->
imgRolloverSwap($(#))
), ->
imgRolloverSwap($(#))
imgRolloverSwap = ($img)->
srcName = $img.attr('src')
$img.attr('src', $img.data('rollover'))
$img.data('rollover', srcName)
The SVG is embedded with the IMG tag, and basically all it does is switch out the rollover image for the one inside the data attribute.
My HTML is thus:
<div id="social-links">
<a href="https://www.facebook.com/pages/StackCommerce/220449001487225">
<img data-rollover="/assets/img/footer/facebook-rollover.svg" class="rollover" type='image/svg+xml' src="/assets/img/footer/facebook.svg" />
<!-- <img class="rollover" src="/assets/img/footer/facebook.svg" alt="facebook link" target="_blank"> -->
</a>
<a href="https://www.linkedin.com/company/stackcommerce">
<img class="rollover" src="/assets/img/footer/linkedin.svg" alt="linkedin link" target="_blank">
</a>
<a href="https://plus.google.com/u/0/b/104759401634432683234/104759401634432683234/aboute">
<img class="rollover" src="/assets/img/footer/google.svg" alt="google plus link" target="_blank">
</a>
<a href="https://twitter.com/stackcommerce">
<img class="rollover" src="/assets/img/footer/twitter.svg" alt="twitter link" target="_blank">
</a>
</div>
The CSS(Sass) is this:
#social-links {
#extend .col-xs-12, .col-sm-3, .col-md-2;
a {
#extend .col-xs-3, .col-sm-6;
margin-bottom: 15px;
}
img {
#extend .img-responsive;
}
}
However, on first hover the image works, but when you roll off, the image gets smaller.
This happens if you use the jQuery technique or if you use vanilla JS to change out the src name with a regular expression.
This doesn't happen to other image formats, and I have tried setting different 100% widths on nearly every element of the cascade.
Fixes from these threads don't seem to be fixes:
SVG resizes on hover in safari only
Scaling/Resizing SVG in an HTML
Rollover SVG images resizing in Safari and IE
Perhaps someone can shed some light on why this is happening, or a technique to help in Safari?
You can see it here on this page, and at the bottom of it in the footer.
http://beta.stackcommerce.com.s3-website-us-east-1.amazonaws.com/publishers/
Thanks in advance!

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.

jQuery cycle plugin with only one image

This is a bit strange question but I am trying to use the cycle plugin to display only one image. That is just to use the various effects the plugin is providing. I have a row of images with certain text and each image/text will be hosted inside a div tag which will be enclosed by the cycle plugin. At certain times, different div tag will have some animation effect using the plugin's cycle function. I think I can add the same div tag to work around this but I am wondering if anyone knows how to do what I want to do.
If you're trying to cycle between DIVs that have the same image but different text then, yes, you can do that. Here's a basic example.
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<style type="text/css">
.slideshow { position: relative }
.slideshow div { position: relative; }
.slideshow div span { position: absolute; top: 5px; left: 5px; }
</style>
<div class="slideshow">
<div>
<span>Here's some text!</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Some more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Even more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
</div>

Categories