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