Grow your CSS skills. Land your dream job.

Swap Image with Content

  • # August 9, 2010 at 2:19 am

    Hey Hi!

    well I’m starting to learn jquery and I can say that I’m newbie trying to create something in jquery …… so I ask for some Master Jedi that can help me in this issue….

    I’m trying to swap an image with some content I mean:

    Code:

    The Nonsense Society

    Art, Music, Word
    Website

    The Nonsense Society

    Art, Music, Word
    Website

    and using this jquery for the Swap propose:

    Code:
    $(document).ready(function(){

    $(“div.captions”).css(‘display’,’none’);

    $(‘.branch.swap’).hover(function(){
    $(“.cover”, this).stop().animate({opacity:0},{queue:false,duration:300});
    $(“div.captions”, this).css(‘display’,’block’);

    }, function() {

    $(“.cover”, this).stop().animate({opacity:1},{queue:false,duration:300});
    $(“div.captions”, this).css(‘display’,’none’);
    });
    });

    But I think the jquery is wrong….. I’m mean it works but … something tells me that The code is wrong hahaha..

    well hope somone can take some time to read this and give a hand

    thanks

    and see’a

    # August 9, 2010 at 10:44 am

    what do you mean

    Quote:
    I’m mean it works but … something tells me that The code is wrong
    # August 9, 2010 at 12:47 pm

    Your jQuery is fine. If you’re having any problem, it might be because you have your section and div closing tags backwards

    # August 9, 2010 at 6:20 pm
    "noahgelman" wrote:
    Your jQuery is fine. If you’re having any problem, it might be because you have your section and div closing tabs backwards

    Owh ! i did not notice that.. and in fact that solve a issue that I had in IE8….

    Thnaks a lot

    # August 11, 2010 at 9:06 am

    You use this code it help you
    <table border=1 >
    <tr>
    <td>
    <a href="#">
    <p id="program2">
    . <span>program two tag line for SEO; hidden behind image</span>
    &nbsp; <!– space are important –>
    </p>
    </a>
    </td>
    <td>

    </td>
    </tr>
    <tr>
    <td>
    <a href="#">
    <p id="program3">
    <span>program three tag line for SEO; hidden behind image</span>
    &nbsp; <!– space are important –>
    . </p>
    </a>
    </td>
    <td>

    </td>
    </tr>
    <tr>
    <td>
    . <a href="#">
    <p id="program1">
    <span>program one tag line for SEO; hidden behind image</span>
    &nbsp; <!– space are important –>
    </p>
    . </a>
    </td>
    <td>
    Satya Prakash – on PHP platform
    </td>
    </tr>
    </table>

    # August 11, 2010 at 1:28 pm

    Do NOT use that code. It’s terrible.

    # August 12, 2010 at 7:02 pm

    Thanks for the recommendations :lol:

    Yes the code is working fine, but IE is the exception I don’t know why, but all png in ie7 and 8 are showing the black border in all png after hover…

    I tryed every pngfix including unitpngfix > this one erease all png’s after hover. :lol:

    anyone know why png’s loose transparency in IE ?

    thanks!

    # August 12, 2010 at 10:31 pm

    Because I give up trying PNG jajaja I use simple backgrounds and gifs..

    check out my concept:

    Code:
    http://sabormexicano.com/new/on/
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".