Comment créer un retournement d`image en css

Créez les deux images nécessaires à votre image rollover 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.

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

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

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

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

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

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; fond: URL () no-repeat 0 0- overflow: hidden- text-indent: -10000px; font-size: 0px; line-height: 0px;}.

Ajoutez 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 la première 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.

Définir un nom pour la classe CSS du rollover 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 après l`une initiale 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.

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

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 mi-hauteur du fichier image entre le tableau de bord et le px. Par exemple, si vous avez nommé la classe "rollinover" et l`image est de 100 pixels de haut, votre code devrait ressembler à ceci: a: hover.rollinover {background-position: 0 -50px;}.

Recherchez où dans le code que vous voulez placer votre image.

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

Ajoutez le code href ="" entre les premiers guillemets et le support de fermeture de l`ouverture d`une étiquette, avec l`URL que vous souhaitez l`image pour créer un lien vers entre le nouvel ensemble de guillemets, si l`image est d`être un lien.