1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Mouse Over Enlarge Image Functionality problem??

Discussion in 'JavaScript' started by tptnyc, May 31, 2010.

0
  1. #1
    How do I get Mouse Over Enlarge Image functionality? Can anyone post some javascript here?
    This is what I have now:
    <p>


    <body><div id=Echoc>

    <table cellpadding=8 cellspacing=8 border=0 align=center width=70%>
    <tr valign=top align=center>
    <td class=extra colspan=3><FONT COLOR="BLUE">: Our Photo Gallery :</FONT>
    </td>
    </tr>

    <tr valign=top align=center>

    <td><a href='images/pic1.JPG' target='_new' title='Click to enlarge'>
    <img src='pic1.JPG' width=230 height=170 border=0></a>
    <br><b>Before</b></td>

    <td><a href='images/pic2.JPG' target='_new' title='Click to enlarge'>
    <img src='pic2.JPG' width=230 height=170 border=0></a>
    <br><b>After</b></td>


    </tr>
     
    tptnyc, May 31, 2010 IP
  2. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Umm... surprisingly, no reply. Can someone add some javascript to it to make the Mouse Over Enlarge Image Function or suggest a better option?
     
    tptnyc, Jun 2, 2010 IP
  3. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you need 2 images

    pic_big.jpg, pic_small.jpg, id of img tag img

    attach event on img tag

    addEvent (img, "mouseover",enlarge);


    function addEvent ( obj, type, fn ) {
    if ( obj.attachEvent ) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
    } else
    obj.addEventListener( type, fn, false );
    }


    funciton enlarge(){

    document.getElementById("img").src = "pic_small.jpg";

    }

    You could attach another mouseout event to make the image come back to small one
     
    unigogo, Jun 3, 2010 IP
  4. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks unigogo. It should work, I guess.
     
    tptnyc, Jun 3, 2010 IP
  5. tdemetri

    tdemetri Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    it could be done a different way, too - maybe a little simpler. this way does not need a second image.
    as long as the original image's height is set via a css style - either inline or embedded, you can just target the style to change the size to whatever you want.

    using this image tag 
    <img src="img2a.jpg"  id="img" height="20px" onmouseover="enlarge()"  onmouseout="unEnlarge()" />
    HTML:

    then these 2 javascript functions would make the changes:
    function enlarge(){document.getElementById("img").style.height="60px";}
function unEnlarge(){document.getElementById("img").style.height="20px";}
    Code (markup):
    hope that helps, or at least adds to the conversation.
     
    tdemetri, Jun 12, 2010 IP
  6. adrevol

    adrevol Active Member

    Messages:
    124
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #6
    As a simple solution for your requirement You can go ahead and Use Jquery + Colorbox ..


    You can acheive your functionality in a simple 2 steps
     
    adrevol, Jun 14, 2010 IP
  7. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    So what's the coding for this & where to insert?
     
    tptnyc, Jun 13, 2011 IP