PDA

View Full Version : Can I add a link to the flipped image? (CSS 3D Flip)



mlegg
01-24-2013, 06:11 PM
CSS 3D Flip (http://www.dynamicdrive.com/style/csslibrary/item/css_3d_flip/)

Can the flipped image become a link? I want to use the 3D flip but on the 1st image I want it to be a regular image but when it flips I would like the image to turn into a link. Is this possible?

thanks

loljez
01-24-2013, 11:53 PM
Try sticking a <a href="website.com"> </a> around the <img> tag, might need to specify border=0 in the <img> tag if you turn it into a link however. should work.

mlegg
01-25-2013, 01:02 AM
ah, I didn't think it would be that simple, thanks

mlegg
01-26-2013, 12:44 AM
I used it on this test page http://www.ipcamhd.com/indexflip.html for the top left image

It works incredible!

jscheuer1
01-26-2013, 05:55 AM
Just an observation. In Chrome it works but I think you should also link the unrotated image (Tenvis-images/Mini319W.jpg).

I say this because when you first move the mouse over it, the cursor is an arrow and there's no link address in the status. If as it starts to flip you stop moving the mouse, after it flips it remains an arrow cursor with no link address in the status. Only after you move the mouse some more does the cursor change to the pointer and the address appears in the status.

A fine point I know. But easily fixed, just add the highlighted:


<div class="flip" style="display: inline-block; margin-right: 40px">
<div class="rotate x">
<a href="mini319.html"><img src="Tenvis-images/Mini319W.jpg" width="250px" height="250px"></a>
<div>
<a href="mini319.html"><img src="images/BuyNow.jpg" style="margin:0 auto" /></a>
</div>
</div>
</div>

Another reason for doing so is that it's possible that some browser(s) might only show the unrotated image

mlegg
01-26-2013, 02:04 PM
Thanks John

mlegg
01-28-2013, 06:04 PM
John I uploaded the test page and it works fine in everything but IE. In IE you see the "Buy Now" image only. :confused:

http://www.ipcamhd.com/indexflip.html is where the test page is at.

jscheuer1
01-28-2013, 06:49 PM
I guess you haven't checked in Opera then, it too is unsupportive of the CSS involved. IE 9 doesn't support the CSS, but at least it degrades gracefully in most cases, showing the flipped to image. There's an even greater problem with IE 10 though, it does support some of the CSS, but not all. It will show the product image and flip that, no image change.

With IE 9 and less you can use conditional comments to present alternate content and/or styles to the user (perhaps a javascript mouseover fade transition). However, with IE 10, MS has discontinued conditional comments. So you either have to use an emulate IE9 meta tag to get IE 10 to follow the conditional comments for IE 9 and less or use javascript to browser sniff IE 10 and have it do something different. Opera, you would have to sniff.

It's a mess I know. But these CSS features (according to the Mozilla Developer Network) are still experimental. Only Chrome, and Firefox behave as expected as far as I know. That probably means that Safari would work and probably other Mozilla based browsers.

They're best used when only showing the flipped to image is an acceptable result in unsupporting browsers, even then, IE 10 (as mentioned above) is a special case. It will only show the flipped from image and flip it.

mlegg
01-28-2013, 08:01 PM
OK thanks a lot.

jscheuer1
01-28-2013, 08:47 PM
Sure. Oddly it's the backface-visibility property that's apparently the problem in IE 10. On:

https://developer.mozilla.org/en-US/docs/CSS/backface-visibility

MDN indicates it's supported by IE 10. However their demo images on that page do not work in IE 10 as they do in Chrome and the Fox. I played around with it a bit and IE 10 does make a distinction between backface-visibility: hidden; and backface-visibility: visible;, it's just not the same distinction that the other compliant browsers make. Not at least when coupled with the flip. The flip in others makes the back face the front face, so all goes as planned. In IE 10, the faces don't exchange, so you see only the obverse of the front face.