im trying to make an image have a flipping animation when hovered over with the mouse.
kind of like a wheel of fortune card flips except its one image on one side and a different version of the image on the other side. any ideas how i do this ?
<img src="image1.jpg" onmouseover="this.src='image2'" onmouseout="this.src='image1'" />
i was looking it up online and i see how to make images rotate but not to flip over into another image. any ideas how to get me started would be greatly appreciated
I would recommend taking a look at this article.
Essentially, what you would want to do is have the two images as separate image objects
<img src="image1.jpg"/>
<img src="image2.jpg"/>
something to toggle in (in the article's case, an anchor)
<a href="index.html" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
and finally something to store it (another image)
<img name="flippr" src="image1.jpg"></a>
I believe this resource outlines the effect you're trying to achieve. Pretty strong explaination. http://guilhemmarty.com/flippy/
Related
Hello Stackoverflowers,
First of all thank you for reading this post. I am having a rough time trying to figure out how to make my Cycle 2 slideshow images shrink and move the images next to the other divs while resizing windows. The funny thing is that when the slide show has only one png the image moves next to all other divs while resizing, but when I add another image to the slide show all the images stays in its own position and doesn't move with the shrink.
here is my code for the Sector:
<div id="clientscont">
<div class="Title2">Clients</div>
<div id="container">
<div id="wrapper"> <div class="controller" id="prev2"></div><div class="controller" id="next2"></div></div>
<div id="slider2">
<img src="../image1.png" alt="" width="265" height="116" class="logoclient2"/>
<img src="../image2.png"/>
</div>
</div>
</div>
I tried everything in positioning and display modes and even tried making them separate divs with different attributes....but can't make it work. I really need your help, I thank you all in advance.
*For Cycle I am using jquery
Solved,
changing css attribute to list-Item display solved the issue, it is the only display mode that worked, to solve the bullet problem just changed the font color to the actual background color to hide the bullet. Now both images stayed centered while shrinking page. The truth is that i don't know the reason of this, if somebody could explain it would be perfect!
ShaloM! and Happy Coding!
I came across the problem of image loading in website.
It's need to load 3 high resolution images in home page, and when open, it's showing website other contents first and load this images which is fine for now.
But it's slightly awkward, and would like to have similar image loading process like Google image search.
When I click image in Google, it shows blurred or pixelate image which seems like low resolution and lower size and loading original image a bit later.
They might use special thing as they are Google, but if someone have done this kinds of things before, I need your help.
Thanks in advance
Sounds like you want what are called "progressive JPEGs", where multiple images of varying quality are saved in one file, and the browser loads the low resolution images quickly to get something in the page, and replaces it with higher resolution images once they've been loaded.
Here's a tutorial on saving JPEGs for the web as progressive in Photoshop
You can use jQuery. The following is a general idea, not an exact code.
For each image use something like:
<div>
<img id="myimg" src="" style="display:none">
<img src="low-res-version link">
</div>
You should also keep a low res image.
Use jQuery to set your images src after the page loades, and use the next() function to remove the low res image.
$(document).on('ready', function() {
$('#myimg').attr('src', 'link to the image').on('load', function() {
$(this).css('display', 'block').next().remove();
}
You can also check this question: Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?
Well, I choose resolutions from the server-side;
loading the low-res immediately in a z-index=0 object,
loading the one or more hi-res objects into negative z-index objects
and then at onload(), choose which object should be on top
How can I make something similar to the effect below. When you scroll the scrolling isnt continuos, instead you jump to the next image down.
http://www.yesstudio.co.uk/
I image its pretty complicated JS so im very open to other solutions that achieve a similar affect.
I think you'll need to use JS. Use JQuery. Shouldn't be that complicated.
If you look at the page source, you'll see that images are loaded normally in order. All you have to do is put one
<div style='width:100%;height:100%;position:fixed;z-index:2'>
<img id='pic' src=''>
</div>
into your html, and then update src atribute depending on $(window).scrollTop(). I think JQuery has a function that tells you which elements are visible. Not sure though. Look it up.
Give it some thought.
So I tested some free sliders out there; simple JS scripts, but they seem to use img-tags.
The problem is, that I have something like a badge, and that has to be in the foreground.
What I dont get .. it does not matter in what order I am arranging them; just two images like:
<img style="margin-top:-100px;" src="images/slider_image.png">
<img style="margin-left:-30px;" src="images/badge.png">
I tried to surround them with divs, giving them a z-index.
Both are surrounded by a div-tag.
So how can I make sure to have a siple JS slider, whilst the badge is always on top ?
I was searching for a slider that uses a div with "background-image:url()" because then it is actually working.
or maybe there are other solutions ?
// edit:
Oh and I also tried to update the badge source with jQuery like $('#badge').attr("src","someimage")
because I thought it could be a problem that JS is updating the slider image after the badge, but did not help
Thanks for the hint; just got it.
I set the badge to position:relative and that made the effect already working ... thanks anyway ! :)
I know this site works on a points system, so i'll like to stress i'm a developer just starting out and i'm new to this site. Please be nice!!!
I have a slight problem with developing what i'm trying to achieve, i believe this maybe, predominately a HTML issue. I have downloaded two plugin's one being an image zoom function and the other is an image gallery with thumbnails.
The challenge i'm facing is integrating the two functions together, as both functions require an i can't find a "clean" way to merge these two pieces of script together. Is there anyone out there that knows how i can merge these two script together?
Image zoom HTML
<a class="zoom" href="css/product-gallery/item1.jpg"><img class="product-gallery" src="css/product-gallery/item1.jpg" alt="img1"></a>
Image gallery with Thumbnails HTML
<a class="thumb" href="css/product-gallery/item1.jpg" title="Title #0"><img src="css/thumbnails/thumb2.jpg"/></a>
Click here for Image zoom code
P.S "It's not a lightbox effect i'm after, it's more an eCom image zoom function i'm after"
Having them both (lightbox zoom + on hover zoom) doesn't really make much sense, you should choose one and go with it. Lightbox is very easy to use and will do exactly what you want so i'd go with that. Quick little example: -
<script type="text/javascript">
$(function() {
$('#imageGallery a').lightBox();
});
</script>
<div id="imageGallery">
<img src="thumbnail-image" />
</div>
If a 'lightbox-like' function is not what you're after, then try something like this:
http://www.jacklmoore.com/zoom
And for some quick mock-up code of it in action:
http://jsfiddle.net/jquerybyexample/cvjsN/