Results 1 to 10 of 10

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

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    357
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Question Can I add a link to the flipped image? (CSS 3D Flip)

    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

  2. #2
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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.

  3. The Following User Says Thank You to loljez For This Useful Post:

    mlegg (01-25-2013)

  4. #3
    Join Date
    Jan 2009
    Location
    NH
    Posts
    357
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    ah, I didn't think it would be that simple, thanks

  5. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    357
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    I used it on this test page http://www.ipcamhd.com/indexflip.html for the top left image

    It works incredible!

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
     <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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mlegg (01-26-2013)

  8. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    357
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    Thanks John

  9. #7
    Join Date
    Jan 2009
    Location
    NH
    Posts
    357
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    John I uploaded the test page and it works fine in everything but IE. In IE you see the "Buy Now" image only.

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

  10. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mlegg (01-28-2013)

  12. #9
    Join Date
    Jan 2009
    Location
    NH
    Posts
    357
    Thanks
    54
    Thanked 10 Times in 10 Posts

    Default

    OK thanks a lot.

  13. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Sure. Oddly it's the backface-visibility property that's apparently the problem in IE 10. On:

    https://developer.mozilla.org/en-US/...ace-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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Using book flip and open specified link in new window
    By tghhampton in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-23-2009, 04:31 AM
  2. help on image book flip for myspace
    By steve-james in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-04-2008, 01:01 PM
  3. Flip OR Flop an image
    By snyhof in forum Looking for such a script or service
    Replies: 8
    Last Post: 06-30-2007, 03:22 AM
  4. Image Flip With Sound
    By derek barnstorm in forum JavaScript
    Replies: 0
    Last Post: 07-02-2006, 08:54 PM
  5. book flip image flickering
    By rosier in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-14-2006, 09:25 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •