2010-09-18 8 views
0

J'essaie d'obtenir un effet onmouseover et onmouseout dans une page xhtml pour mon menu de navigation.problèmes onmouseover avec Safari

Ce code ne fonctionne que dans Firefox, mais rien d'autre. Quelqu'un peut-il me dire comment l'utiliser sur tous les navigateurs?

Voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<title>title</title> 

<link rel="stylesheet" type="text/css" href="style.css" /> 

<script type="text/javascript"> 
/* <![CDATA[*/ 
    function roll_over(img_name, img_src) 
    { 
     document[img_name].src = img_src; 
    } 

/* ]]> */ 
</script> 

   <li><a href="index.html" onmouseover="roll_over('home', 'images/homeSelected.png')" onmouseout="roll_over('home', 'images/home.png')" ><img src="images/home.png" alt="Home" id="home" /></a></li> 
       <li><a href="about.html" onmouseover="roll_over('about', 'images/aboutSelected.png')" onmouseout="roll_over('about', 'images/about.png')" ><img src="images/about.png" alt="About Me" id="about" /></a></li> 
       <li><a href="portfolio.html" ><img src="images/portfolioSelected.png" alt="My Portfolio" id="portfolio" /></a></li> 
       <li><a href="contact.html" onmouseover="roll_over('contact', 'images/contactSelected.png')" onmouseout="roll_over('contact', 'images/contact.png')" ><img src="images/contact.png" alt="Contact Me" id="contact" /></a></li> 

     </ul> 
    </div> 
</div> 

J'ai essayé cela en chrome et IE 7 & 8 mais l'erreur persiste. Safari me donne l'erreur: TypeError: Résultat d'expression 'document [img_name]' [Non défini] n'est pas un objet «

Répondre

1

Je voudrais essayer de changer votre fonction pour ressembler à ceci:.

function roll_over(img_name, img_src) 
    { 
     document.getElementById(img_name).src = img_src; 
    } 

Ce façon dont il sélectionne directement votre <img> en utilisant votre id passé

+0

Mais comment les identifier. Chacun a un identifiant différent. Dois-je mettre le même comme ID? –

+0

Vous avez déjà configuré l'ID. Dans votre balise img vous avez id = about, id = home etc. Donc, quand vous passiez onmouseover = "roll_over ('about', 'images/about.png)", il envoie l'identifiant correct à la fonction. – WSkid

2

Les versions actuelles de Safari vont malheureusement ignorer l'onmouseover, car avant les écrans tactiles 6S Apple (iPhone, iPad) il n'y avait aucune notion équivalente d'une souris étant terminée quelque chose avant une presse afin d'utiliser mouseover conduire à des interfaces qui d id ne fonctionne pas comme prévu sur les appareils à écran tactile. Donc, pour encourager des conceptions cohérentes Safari a cessé de supporter onmouseover, même pour les dispositifs qui ont une souris.

+0

Soo ... que faisons-nous à ce sujet si nous voulons toujours utiliser hover? – LinusGeffarth

Questions connexes