Editör
Offline
Güven:
+2
(2 oy)
|
Şimdi sizlere birden fazla resmin tek sayfada önizlemesini göstermenin bir yolunu anlatmaya çalışayım. Kullanacağımız kodda 4 tane resim URL olacak. Küçük resimlerin üzerine gelince, büyük hali gözükecek. Ve değişirken küçük bir effecti olacak.
<head>.....</head>
|
<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">
<!--
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[3530497]=["http://resim.araba.com/2008/03/07/577445764d6d3f57711411728f188b6f.jpg", ""]
dynimages[3530625]=["http://resim.araba.com/2008/03/07/2f8ad5c80d68b1d3c5e0f9c3659a6a5d.jpg", ""]
dynimages[3530687]=["http://resim.araba.com/2008/03/07/324315bb890377bdd8d87ba455ad05ab.jpg", ""]
dynimages[3530714]=["http://resim.araba.com/2008/03/07/c33139f89053064735432e1dad77a362.jpg", ""]
//Preload images ("yes" or "no"):
var preloadimg="no"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=0
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
// -->
</SCRIPT> |
<body>.....</body>
|
<a href="#" onMouseover="modifyimage('dynloadarea', 3530497)"><img src="http://resim.araba.com/2008/03/07/x577445764d6d3f57711411728f188b6f.jpg" border=0 style="border: solid 2px; color:#CC0000;"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 3530625)"><img src="http://resim.araba.com/2008/03/07/x2f8ad5c80d68b1d3c5e0f9c3659a6a5d.jpg" border=0 style="border: solid 2px; color:#CC0000;"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 3530687)"><img src="http://resim.araba.com/2008/03/07/x324315bb890377bdd8d87ba455ad05ab.jpg" border=0 style="border: solid 2px; color:#CC0000;"></a>
<a href="#" onMouseover="modifyimage('dynloadarea', 3530714)"><img src="http://resim.araba.com/2008/03/07/xc33139f89053064735432e1dad77a362.jpg" border=0 style="border: solid 2px; color:#CC0000;"></a>
|
Büyük Hâlinin Gözükmesi İçin Gereken Kısım
|
| <div id="dynloadarea" style="width:300px;height:225px"></div> |
Kodun Uygulanmış Hâli İçin: TIKLAYIN
|
|
