Effets Bouton mouseover Javascript
Si vous avez déjà vu un bouton sur un site Web qui change de forme lorsque votre curseur est sur elle , alors vous avez probablement déjà vu un effet " Mouseover " en utilisant javascript . Javascript , à ne pas confondre avec le langage de programmation Java , est un langage de script simple pour les pages Web . La possibilité pour les javascript pour stocker et récupérer des variables permet des effets uniques lorsque la souris survole un élément, y compris les boutons .
La « souris» attribut
Le plus souvent , javascript est engagé par la définition de « souris» au sein d'une balise link
& lt ; . a href = " mysite.com " onmouseover = "
Cet attribut effectivement chargée de retenir le code javascript vous écrivez pour les boutons ou peut directement identifier le nouvelle image . Comme la plupart des boutons dans les pages Web sont en fait de petits fichiers images , vous pouvez créer de nombreux effets différents en utilisant deux images différentes, une pour le bouton régulière et l'autre pour le bouton " Mouseover " .
intégré Javascript
Aujourd'hui, beaucoup navigateur inclut le code javascript nécessaire pour intégrer la « souris» et « OnMouseOut , " qui renvoie le bouton à son état initial après que la souris a laissé , sans javascript supplémentaire. pour accomplir cela, placer l'expression « document. [ itemname ] .src = [ emplacement] " après le " plus ... " et " ... à« attributs . Le " [ itemname ] " est remplacé par la valeur de l'attribut ID dans la balise image que vous voulez basculé. Par exemple , document.mine.src = " mypicture2.jpg " serait corrélée à une balise d'image & lt; img src = mypicture.jpg id = moi > . La "location" est le répertoire où le MouseOver ou un fichier MouseOut assied . Si ce est le même répertoire que le fichier HTML où le code est écrit , seul le nom du fichier est nécessaire .
Ajoutant Script
Ce type de code peut être lourd si vous désirez de nombreux effets de survol . Pour simplifier le processus , vous pouvez écrire une fonction javascript et simplement appeler cette fonction avec un nombre ou une chaîne variable. Placez le javascript dans l'en-tête du fichier HTML et le joindre au sein de & lt; script> . La «fonction 'nom' ( ) " - où «nom» est un nom unique que vous choisissez - peut alors être appelé dans le & lt; OnMouseOver ou OnMouseOut attributs A> de balise. Par exemple , & lt; a href = " webpage.html " onmouseover = " MyOver ( ) " onmouseout = " MyOut ( ) > . " Si vous utilisez des variables , vous pouvez créer un script qui recherche automatiquement une image et son équivalent MouseOver correspondante . Par exemple , le script pourrait chercher un fichier de l'image " [ variable] de _on.jpg " quand OnMouseOver est activé et " [ variable] _off.jpg " quand OnMouseOff est activée . Puis l'étiquette ne aurait qu'à appeler " onmouseover = ' myout ( [ variable] ) " pour être activée . Les images associées seraient , bien sûr , doivent être désigné comme " [ variable] _on.jpg " et " [ variable] _off.jpg " - " [ variable] » est , bien sûr , ne importe quel texte ou chaîne numérique que vous choisissez .
survol images de
les renversements viennent finalement à la façon dont vous fabriquiez les images pour afficher le bouton . Certains effets secondaires courants comprennent faire teh bouton " lueur " d'origine que vous survolez . Effets plus vieilles, faites un bouton soulevé prospectifs apparaît comme si elle avait été enfoncé . Ces effets utilisent plusieurs images , créés dans le logiciel d'édition graphique . Il est important que tous ces fichiers d'image sont les mêmes dimensions exactes , sinon la page Web pourrait être déformé sur chaque roulement .