Images not coming side-by-side...

Discussion in 'JavaScript' started by tptnyc, Jun 2, 2010.

0
  1. #1
    Two Images not coming side-by-side. What I am missing here?

    <html>
    <head>



    <script language="javascript">
    function fn_large()
    {

    document.getElementById('myImage').style.height = '400px';
    document.getElementById('myImage').style.width ="400px";
    }
    function fn_normal()
    {

    document.getElementById('myImage').style.height = '130px';
    document.getElementById('myImage').style.width ="170px";
    }


    </script>

    </head>

    <body>
    <table border=1>
    <tr><td><image id="myImage" src="pic1.JPG" border=1 width="340px" height="260px" onMouseover="fn_large()" onMouseout="fn_normal()"></td></tr>

    <tr><td><image id="myImage" src="pic2.JPG" border=1 width="340px" height="260px" onMouseover="fn_large()" onMouseout="fn_normal()"></td></tr>

    </table>
    </body>

    </html>
     
    tptnyc, Jun 2, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Try this:

    
<html>
<head>



<script language="javascript">
function fn_large(imgID)
{

document.getElementById(imgID).style.height = '400px';
document.getElementById(imgID).style.width ="400px";
}
function fn_normal(imgID)
{

document.getElementById(imgID).style.height = '130px';
document.getElementById(imgID).style.width ="170px";
}


</script>

</head>

<body>
<table border=1>
<tr><td><img id="myImage1" src="pic1.JPG" border=1 width="340px" height="260px" onMouseover="fn_large(this.id)" onMouseout="fn_normal(this.id)"></td><td><img id="myImage2" src="pic2.JPG" border=1 width="340px" height="260px" onMouseover="fn_large(this.id)" onMouseout="fn_normal(this.id)"></td></tr>

</table>
</body>

</html>
    Code (markup):
     
    s_ruben, Jun 2, 2010 IP
  3. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeap! It's coming fine side-by-side now but I need to give some space (about 1/2 " or so) between the two pics.
     
    tptnyc, Jun 3, 2010 IP
  4. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #4
    Change content of body to this:

    
<table border=1>
<tr><td><img id="myImage1" src="pic1.JPG" border=1 width="340px" height="260px" onMouseover="fn_large(this.id)" onMouseout="fn_normal(this.id)"></td><td><img style="margin-left: 20px" id="myImage2" src="pic2.JPG" border=1 width="340px" height="260px" onMouseover="fn_large(this.id)" onMouseout="fn_normal(this.id)"></td></tr>

</table>
    Code (markup):
    If you want to change the distance, change the number 20 in the code "margin-left: 20px".
     
    s_ruben, Jun 4, 2010 IP