The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

image mouseover, replace div text

  • # March 11, 2010 at 7:54 pm

    I am trying to change a div content via mouseover some images. I thought this might do it but no luck. I would like to mouse over the image with an ID of img1, img2 and img3 then have the div below replace the text with the var text.

    var $img1 = ‘

    From the outset, Bla Bla Bla one.

    var $img2 = ‘

    From the outset, Bla Bla Bla two.

    var $img3 = ‘

    From the outset, Bla Bla Bla three.


    $(function() {
    var $cb = $(“.mark_container”);
    $cb.mouseover(function() {
    var $picTxt = $(this).find(“img”).attr(“id”);
    $(‘#mark_txt’).html(”).html($picTxt); < ------------------ Problem }).mouseout(function() { $cb.removeClass("active-mark"); $(this).addClass("mark_container"); $('#mark_txt').html('').html($defaultTxt); <------------------ Problem }); })

    here is my html


    From the outset, Default text

# March 12, 2010 at 3:45 am

This reply has been reported for inappropriate content.

I got this to work with your html code.


var img1 =”What?!”
var img2 =”Lorem ipsum”
var img3 =”Dolor Sit Amet”

$(“div#mark_txt p”).html(img1);

$(“div#mark_txt p”).html(img2);

$(“div#mark_txt p”).html(img3);


# March 12, 2010 at 7:08 pm

Thanks jamy_za, I had it that way at first but was looking to create an function.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed