PDA

View Full Version : JavaScript - Make a Photo Gallery

Core
03-01-2010, 10:01 AM
<html>

<body style='background-color:black'>


<div style="text-align:center;">

<table border='0' cellpadding='10'>

<tr>

<td>
<img src='img1.jpg' alt='image1' name='image1' onmouseover="document.images['image1'].src='img1.jpg';width='640';height='480' " onmouseout="document.images['image1'].src='img1.jpg';width='160';height='120' " width='160' height=120'' />
</td>

<td>
<img src='img2.jpg' alt='image2' name='image2' onmouseover="document.images['image2'].src='img2.jpg';width='640';height='480' " onmouseout="document.images['image2'].src='img2.jpg';width='160';height='120' " width='160' height=120'' />
</td>

<td>
<img src='img3.jpg' alt='image3' name='image3' onmouseover="document.images['image3'].src='img3.jpg';width='640';height='480' " onmouseout="document.images['image3'].src='img3.jpg';width='160';height='120' " width='160' height=120'' />
</td>

</tr>



<tr>
<td>
<img src='img5.jpg' name='image5' alt='img5' width='160' height='120' onmouseover="document.images['image5'].src='img5.jpg';width='640';height='480' " onmouseout="document.images['image5'].src='img5.jpg';width='160';height='120' " />
</td>

<td>
<img src='img6.jpg' name='image6' alt='img6' width='160' height='120' onmouseover="document.images['image6'].src='img6.jpg';width='640';height='480' " onmouseout="document.images['image6'].src='img6.jpg';width='160';height='120' " />
</td>

<td>
<img src='img7.jpg' name='image7' alt='img7' width='160' height='120' onmouseover="document.images['image7'].src='img7.jpg';width='640';height='480' " onmouseout="document.images['image7'].src='img7.jpg';width='160';height='120' " />
</td>

</tr>

<tr>
<td>
<img src='img8.jpg' name='image8' alt='img8' width='160' height='120' onmouseover="document.images['image8'].src='img8.jpg';width='640';height='480' " onmouseout="document.images['image8'].src='img8.jpg';width='160';height='120' " />
</td>

<td>
<img src='img9.jpg' name='image9' alt='img4' width='160' height='120' onmouseover="document.images['image9'].src='img9.jpg';width='640';height='480' " onmouseout="document.images['image9'].src='img9.jpg';width='160';height='120' " />
</td>

<td>
<img src='img10.jpg' name='image10' alt='img10' width='160' height='120' onmouseover="document.images['image10'].src='img10.jpg';width='640';height='480' " onmouseout="document.images['image10'].src='img10.jpg';width='160';height='120' " />
</td>

</tr>

<tr>
<td>
<img src='img4.jpg' name='image4' alt='img4' width='160' height='120' onmouseover="document.images['image4'].src='img4.jpg';width='640';height='480' " onmouseout="document.images['image4'].src='img4.jpg';width='160';height='120' " />
</td>

<td>
<img src='img11.jpg' name='image11' alt='img11' width='160' height='120' onmouseover="document.images['image11'].src='img11.jpg';width='640';height='480' " onmouseout="document.images['image11'].src='img11.jpg';width='160';height='120' " />
</td>

<td>
&nbsp;
</td>

</tr>

</table>

</div>

</body>

</html>



Then you got following result

http://i942.photobucket.com/albums/ad262/reckjavik/JavaScript/img2.jpg


http://i942.photobucket.com/albums/ad262/reckjavik/JavaScript/img1.jpg


Note : all codes have been written by Core so don't steal mine ,if you want to use then put the reference with you (use Harvard Reference System)
Core
03-01-2010, 10:10 AM
Explain

img1 ,img2 ,img3 ,imgn represent the images' names
and use them always with the format

<img></img> tags used to draw image on the HTML page
and use

onmouseover - event trigs out when mouse on the object
onmouseout - event trigs out when mouse out of the object (like move mouse and get then this event trigs out)

document.images[] - is an array of images object and can be used to refer the image within the document (current document) there is a sub property which can be used to refer the source

document.images[].src=""

document.images["image name"] - use this when you type either name or ID number of appropriate image
document.images[0]


but remember document.images[] doesn't need if you use event embedded with the object ,but it's a good practice also use always when you use event in external source