Les partenaires publicitaires:

Comment créer un retournement d'image en CSS

Effets image de survol sont une des caractéristiques de conception de sites Web communs les plus avancés. Lorsque vous placez le curseur sur une image avec un effet de survol, l'image change d'apparence jusqu'à ce que vous éloignez le curseur. Il existe de nombreuses méthodes pour créer des effets de survol, mais l'un des plus rationalisée et d'aspect professionnel est de les faire en CSS.

Choses que vous devez

  • Logiciel graphique
  • Traitement de texte

Instructions

  1. Créez les deux images nécessaires pour votre Survolez l'image dans votre logiciel d'édition graphique et de les enregistrer sous forme de fichiers JPG. Assurez-vous que les deux images ont les mêmes dimensions en pixels exactes et le même montant, le cas échéant, de l'espace vide entourant le graphique dans chaque fichier jpg.

  2. Créer la même largeur que vos images et exactement deux fois la hauteur soit un nouveau document graphique.

  3. Collez les deux images dans le nouveau document. Placez l'image initiale en haut et l'image de survol au ascendante ils doivent être parfaitement alignés horizontalement les uns aux autres et de prendre tout l'espace disponible dans le document. Enregistrer ce nouveau fichier comme un jpg et nommez-le quelque chose de descriptif comme rolloverimage.jpg. Ceci est le seul fichier image que vous allez utiliser pour la rollover- vous ne devez pas les deux d'origine.

  4. Téléchargez l'image à votre site Web ou à un service d'hébergement gratuit d'image et enregistrer son URL complète.




  5. Ouvrez le document HTML dans un traitement de texte et de localiser les balises head ( et ). Ils doivent être en haut du document.

  6. Ajouter des balises de style CSS entre les balises head, si elles ne sont pas déjà présents. Les étiquettes doivent ressembler à ceci:.

  7. Ajouter code CSS entre les balises de style pour définir le comportement initial de votre image de survol. Le code de base pour cela est un. {display: largeur d'îlot: px; Hauteur: px; background: url () no-repeat 0 0- overflow: hidden- text-indent: -10000px; font-size: 0px; line-height: 0px;}.

  8. Ajouter les valeurs nécessaires dans le code CSS pour le faire appliquer à votre image. Ajoutez la valeur de pixel de la largeur de votre fichier rolloverimage.jpg juste avant le premier px, la valeur de pixel de la moitié de la hauteur du fichier juste avant la deuxième px et l'URL complète du fichier d'image entre la parenthèse.

  9. Définir un nom pour la classe CSS du renversement image. Ceci est ce que vous allez utiliser pour indiquer dans le code HTML que l'image doit utiliser le CSS vous venez d'entrer, et il peut être tout seul mot que vous voulez. Entrez ce mot immédiatement après la période initiale après l'un dans le code CSS, sans espace entre eux. Par exemple, si vous voulez appeler la classe "rollinover," le code CSS devrait commencer par a.rollinover.



  10. Ajouter une deuxième ligne de code CSS nouveaux entre le code que vous venez d'entrer et la balise de style de clôture. Cette ligne permettra de définir ce qui se passe lorsque le visiteur passe le curseur sur l'image. Le code de base pour cette est a: hover. {background-position: 0 -PX;}.

  11. Ajouter les informations nécessaires à la deuxième ligne pour le rendre applicable à votre image. Ajoutez le nom de la classe que vous avez défini immédiatement après la période après vol stationnaire sans espace, et ajoutez la valeur de pixel de la moitié de la hauteur du fichier d'image entre le tiret et l'px. Par exemple, si vous avez nommé la classe "rollinover" et l'image est de 100 pixels de haut, votre code devrait ressembler à ceci: une: hover.rollinover {background-position: 0 -50px;}.

  12. Repérez les endroits où le code que vous voulez placer votre image.

  13. Ajoutez le code texte où vous voulez que votre image apparaisse. Ajoutez le nom de classe que vous avez défini dans le CSS nouveaux entre les guillemets, et de remplacer le mot «texte» avec une brève description de l'image (ou du lien, il sera utilisé comme, le cas échéant).

  14. Ajoutez le code href = "" entre les premiers guillemets et le support de clôture de l'ouverture d'un tag, avec l'URL que vous voulez que l'image à lier entre le nouvel ensemble de guillemets, si l'image est d'être un lien .

» » » » Comment créer un retournement d'image en CSS