RESİM DEĞİŞTİRMEK

 Web sayfalarında üzerine gidince değişen resimlere sık sık rastlıyorsunuzdur. Java Applet, ActiveX kontrolü gibi derlenmiş bir öğe kullanmadan bu işi siz de kolayca gerçekleştirebilirsiniz. Örneğimizi uygulamadan önce grafik editörünüz ile 100*20 ebatlarında RESIM1-1.GIF, RESIM1-2.GIF, RESIM2-1.GIF, RESIM 2-2.GIF adlarında 4 adet grafik dosyasını hazırlayın. "-1" uzantısı ile biten dosyalar resmin ilk halini "-2" uzantısı ile bitenler ise resmin fare imleci üzerine gittiği hali oluşturacaktır.

Script'imizde her bir resim için bilgi "aOn.src", "bOn.src" gibi değişkenlerde tanımlanmış. Bu değişkenleri uzatarak dilediğiniz sayıda kısayol kullanabilirsiniz. Resimleri oluşturduktan sonra örnek HTML dosyamızı oluşturun ve resimleri HTML sayfanızla aynı klasöre taşıyın. Resim ebatlarını değiştirmek için ise tek yapacağınız newImage(100, 20); ifadesi ile oynamak olacaktır.

<HTML>
<script language="javaScript">

if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3)
|| (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4)) {
rollOvers = 1;} else {rollOvers = 0;}
var dirLevel = 1;
var levelMod = "";
levelMod = "";
for (i = 0;i < dirLevel;i++) {}

if (rollOvers) {
aOn = new Image(100, 20);
aOn.src = "resim1-1.gif";
aOff = new Image(100, 20);
aOff.src = "resim1-2.gif";
bOn = new Image(100, 20);
bOn.src = "resim2-1.gif";
bOff = new Image(100, 20);
bOff.src = "resim2-2.gif";
}
function switchOn(imgName) {
if (rollOvers){
imgOn = eval(imgName + "On.src");
document [imgName].src = imgOn;}}
function switchOff(imgName) {
if (rollOvers){
imgOff = eval(imgName + "Off.src");
document [imgName].src = imgOff;
}}</script>

<a href="http://www.pcworld.com.tr/haberler" onMouseover="switchOn('a')" onMouseout="switchOff('a')">
<IMG SRC="resim1-2.gif" border=0 name="a"></a>
<p>
<a href="http://www.pcworld.com.tr/share" onMouseover="switchOn('b')" onMouseout="switchOff('b')">
<IMG SRC="resim2-2.gif" border=0 name="b"></a>
</BODY>
</HTML>