Προς το περιεχόμενο

Hover image με Javascript


snik

Προτεινόμενες αναρτήσεις

Δημοσ.

Γεια σας παιδια,ειμαι ασχετος με την javascript αλλα θελω να φτιαξω ενα hover effect σε κατι μενου που εχω φτιαξει στο σαιτ μου.

Θελω οταν ειναι το ποντικι πανω στην εικονα να αλλαζει η εικονα δηλαδη οταν δεν ειναι το ποντικι πανω να δειχνει την pic1 και οταν παει ο κερσορας να γινεται pic2.

Βρηκα ενα script σε ενα σαιτ που λεει πως κανει αυτην την δουλεια που θελω.Το script ειναι αυτο εδω

 

<HEAD>

<SCRIPT language="JavaScript">

<!--

 

if (document.images)

{

pic1on= new Image(100,25);

pic1on.src="shoes2.gif";

 

pic1off= new Image(100,25);

pic1off.src="shoes1.gif";

}

 

function lightup(imgName)

{

if (document.images)

{

imgOn=eval(imgName + "on.src");

document[imgName].src= imgOn;

}

}

 

function turnoff(imgName)

{

if (document.images)

{

imgOff=eval(imgName + "off.src");

document[imgName].src= imgOff;

}

}

 

//-->

</SCRIPT>

</HEAD>

 

 

Στην δικια μου περιπτωση οι εικονες ειναι η bar 2.jpg και η bar 3.jpg και το εχω βαλει ετσι

 

<SCRIPT language="JavaScript">

<!--

 

if (document.images)

{

pic1on= new Image(200,32);

pic1on.src="bar 2.jpg";

 

pic1off= new Image(200,32);

pic1off.src="bar 3.jpg";

}

 

function lightup(bar 3.jpg)

{

if (document.images)

{

imgOn=eval(bar 3.jpg + "on.src");

document[bar 3.jpg].src= imgOn;

}

}

 

function turnoff(bar 2.jpg)

{

if (document.images)

{

imgOff=eval(bar 2.jpg + "off.src");

document[bar 2.jpg].src= imgOff;

}

}

 

//-->

</SCRIPT>

 

και αργοτερα στην html εχω βαλει αυτο για να εμφανιζεται η εικονα

 

<A HREF="index.html" onMouseover="lightup('pic1on')" onMouseout="turnoff('pic1off')">

<IMG SRC="bar 3.jpg" name="bar 3.jpg" width="200" height="32" border="0"></A>

 

 

Αλλα δεν δουλευει σωστα,εχει κανεις ιδεα τι μπορει να φταιει?Στον browser μου βγαζει μονο την μια εικονα και οταν παω πανω το ποντικι δεν γινεται τιποτα.

Δημοσ.

function lightup(imgName)

{

if (document.images)

{

imgOn=eval(imgName + "on.src");

document[imgName].src= imgOn;

}

}

 

function turnoff(imgName)

{

if (document.images)

{

imgOff=eval(imgName + "off.src");

document[imgName].src= imgOff;

}

 

Αυτό το κομμάτι το αφήνεις ακριβώς όπως είναι.Αυτό όταν τρέχει η η συνάρτηση παίρνει αυτόματα το όνομα της εικόνας που έχεις δώσει εσύ στον html κώδικά σου.

 

<A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">

<IMG SRC="bar 3.jpg" name="pic1" width="200" height="32" border="0"></A>

 

Τα κόκκινα κομμάτια πρέπει να έχουν ακριβώς το ίδιο όνομα.

Για κάθε νέα εικόνα που θές να βάλεις,βάζεις ένα διαφορετικό όνομα.

Στα lightup και lightoff δεν χρειάζεται να βάλεις pic1on ή pic1off γιατί με το που τρέχουν οι συναρτήσεις βάζει τις καταλήξεις on και off μόνο του.

Εσύ στο κομμάτι του javascript το μόνο που θα αλλάζεις είναι αυτό το κομμάτι:

 

if (document.images)

{

pic1on= new Image(100,25);

pic1on.src="shoes2.gif";

pic2on= new Image(100,25);

pic2on.src="tshirt2.gif";

pic3on= new Image(100,25);

pic3on.src="hat2.gif";

 

pic1off= new Image(100,25);

pic1off.src="shoes1.gif";

pic2off= new Image(100,25);

pic2off.src="tshirt1.gif";

pic3off= new Image(100,25);

pic3off.src="hat1.gif";

}

 

Μπορείς να προσθέσεις και άλλες εικόνες όπως έχω συμπληρώσει στο κώδικα και ανάλογα προσθέτεις και το κομμάτι html με τα ανάλογα ονόματα.

Ελπίζω να μην σε μπέρδεψα:P.

Δημοσ.

thanks φιλε μου δουλεψε κανονικα!Παντως ειναι λιγο μπερδεμα η javascript παω να διαβασω κανα βιβλιο γιατι μια ζωη ασχετος θα μεινω :-D

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

  • Δημιουργία νέου...