Remplacement d'image avec les styles CSS ...

Un article ... Manu 4 commentaires

Dans l'exemple précédent, nous avons vu comment remplacer une image avec l'outil Dreamweaver, "Image survolée".
Maintenant, essayez d'expliquer comment faire quelque chose de similaire avec les CSS, je pense qu'il est bon de connaître les mesures simples, mais comme j'ai dit avant, si il ya quelques limitations, qui sont nécessaires pour corriger certaines modifications dans les documents, et utilisé en conjonction Html et CSS.Siempre et quand vous allez mettre une image changeante et un lien vers un site non plus, ou en interne.
Nous voyons ...

- Exemples de remplacement d'une image avec les styles CSS ...

Pour rendre cet exemple simple, ne pense pas que nous manquons de beaucoup de choses, mais je vous conseille de choisir deux images de la même taille, bien placé pour quitter notre exemple, alors vous pouvez faire vos propres vérifications avec des images différentes en taille et en mesures, notamment la pratique de placer deux images dans des choses totalement différentes Urls comme ça, comme j'aime, créer, supprimer, et commencer à mettre ...

Nous allons créer une couche </ div> pour ce test avec des images changeantes, et publiera les images entre <td> <table> </ td> </ tr> </ table> afin que nous puissions voir la différence entre chaque étiquette. Pour les deux ejmplos ont les mêmes styles.

N'oubliez pas de placer une image changeante de façons que vous pourriez faire différent, je crois que cette couche <div> ejmplo comme un commentaire et comme une curiosité, il fonctionne parfaitement la div: hover, tous nous avons besoin d'utiliser quelques astuces pour positionner l'image nous avons utilisé comme un lien (anchor -> <a href=""> </ a>) où nous voulons le mettre.

Avis; Cet exemple peut ne pas fonctionner correctement dans IE6, en raison d'une incompatibilité ...

- Début ...
Créer un nouveau fichier HTML dans l'éditeur que vous êtes, ou vous pouvez écrire ou copier le code, nous allons créer pour cet exemple.
Rappelez-vous, ce n'est qu'un exemple des couches Div pour voir ce qui se passe et apprendre de nouvelles choses passer.

J'ai pour mon exemple j'ai choisi ces images, tous les trois ...
L'image du texte est beaucoup plus lourd que les deux autres à être changé, pèse environ 60 Ko, et les cases sont plus grandes en taille mais pas de poids parce que pas plus de 10KB, mais par exemple nous avons eu mieux, mais si vous voulais faire un menu de navigation, par exemple avec ce type d'image avec des ombres, de ralentir quelque peu le fardeau du menu, presque seguro.No souhaitable.
Aussi au lieu d'utiliser l'image que vous pouvez utiliser du texte écrit, parce que mon intention est de mettre l'image au lien <a href=""> </ a> pour le lien par exemple avec mon site.

J'ai commenté auparavant sur ​​que CSS est un peu plus limité la question du remplacement d'image avec <a href=""> liens, donc nous devons compter sur HTML, CSS, car dans le <a href = ""> ne fonctionne pas, contrairement à la script de remplacement et de liens de Dreamweaver que j'ai rejoint dans l'exemple ci-dessus, nous ne pouvons que mettre en css images cambiantes.Explico comment faire ...

Eh bien, j'ai créé la couche et la table, mettre les deux exemples avec les mêmes styles et de voir ce que nous pouvons faire pour nous, c'est dans le lien du centre de l'image.
Je l'ai mis comme il est d'écrire du code ...

- Les styles que j'ai utilisé pour les deux exemples ...

"> text / css de type = ""> supplémentaires <style
. Box {
#FFC url(http://www.internavegacion.com/imagenes-blog/lleno.png) no-repeat ; background: # FFC url (http://www.internavegacion.com/imagenes-blog/lleno.png) no-repeat;
#CCC dotted 1px ; border: 1px # CCC en pointillés;
130px ; hauteur: 130px;
130px ; largeur: 130px;
}
. Encadré: hover {
#E8F4C1 url(http://www.internavegacion.com/imagenes-blog/vacio.png) no-repeat ; background: # E8F4C1 url (http://www.internavegacion.com/imagenes-blog/vacio.png) no-repeat;
}
img {
none ; border: none;
}
</ Style>

Nous voyons dans les images ci-dessous que nous avons en <table> <div> couche, ce qui indique une différence entre eux sur l'image «boîte», ils ont tous deux les mêmes styles CSS, mais nous met DIV l'image du haut à gauche, et l'image <td> tableau nous place dans le milieu de haut (hauteur), et non la largeur (wldth).
Ce n'est pas plus que les observations soient prises en compte, sont intéressants, car nous nous concentrons d'image par défaut <td> d'en haut, et la fonction de calque normal <div> il ya, le démarrage et à gauche ..

Ceci est un exemple de la façon dont la couche est <div> ...
L'image est claire ... et mettre le texte et le code n'est pas mon ...

Le code que j'ai écrit en HTML pour cette <div> couche ...

<div class="caja"> <a href="http://www.internavegacion.com/"> <img src = "http://www.internavegacion.com/imagenes-blog/caja.png" width = "50" height = "35" title = "essai de capotage" alt = "essai de capotage" /> </ a> </ div> </ p>

Pour ce tableau ... <table> <td> </ td> </ tr> </ table>

<td> class = "caja"> <a <table href="http://www.internavegacion.com/"> <img src = "http://www.internavegacion.com/imagenes-blog/ caja.png "width =" 50 "height =" 35 "title =" essai de capotage "alt =" essai de capotage "/> </ a> </ td> </ tr> </ table>

Eh bien nous l'avons vu, la table sera le centre de l'image du texte, mais laisse sur le côté gauche (à gauche), et la couche (div), nous mettons l'image en haut à gauche ... ce qui est normal pour ce type les balises HTML.

En fait, dans le cas de la table, nous nous sommes concentrés <td> image de données de la table, qui, par défaut cela se traduira par le début, l'accent est tout à l'intérieur, à moins d'avis contraire en utilisant les propriétés et les valeurs CSS.

Comme je l'ai écrit avant, en plaçant les images de cette manière un peu limité pour la gestion globale dans les images de couche et de table, pour nous devrions sûrement listes distinctes de sorte que vous pouvez vous concentrer styles CSS.

Image au sein de la DIV ...
Nous devons garder à l'esprit que nous utilisons trois images, une dans le coffre de classe {}, l'un dans la boîte de classe:.. Hover {} pour un changement quand la souris, et l'image lien últino ancrage <a href = ""> ce sera que nous vous emmenons vers d'autres pages ou d'autres sites.

Image dans le tableau ...
Eh bien, nous savons que les images peuvent devenir des éléments vides, de nombreuses propriétés et les valeurs ne sont pas affectées, nous le traitons comme ce qu'elle est, un élément vide ...
Je pense que c'est une bonne idée de prendre des photos, parfois les tableaux, souvent à résoudre des problèmes d'images concentrer teodiosos, mais c'est une question que nous nous concentrions que nous avons et nous aurons, bien sûr ...

- Nous sommes sur les côtés ...

- Nous devons nous concentrer l'image sur la table ...

Commencer par résoudre les tables, ce qui est plus facile pour moi de concentrer l'image, il suffit pour cela, mettre un <td> align: center, ou dans;

Html ->> <td align="center"> </ td>
Html ->> <td style="text-align:center"> styles mediente ...

Html ->> <table style="text-align:center"> </ table> Ceci est également vrai, mais je n'ai pas de soins parce qu'ils se concentrent tous les trouve dans la table, et ce que je veux est spécifique, juste ce contient le lien image, ou quoi que ce soit dans le <td> </ td>

J'espère que je comprends cette partie, vous pouvez également écrire à la CSS, avec des classes, avec des identifiants, mais il est plus facile à mon esprit comme je le fais ci-dessus, mais si plusieurs images, ou de nombreux qui sont traités de cette manière , alors vous organiser, et de créer des classes ou des propriétés de l'événement.

Css ->> td {text-align: center;} Cette netteté de l'image ou le contenu de la table de données.
Css -> table> {text-align: center;} Cette netteté de l'image et le contenu entier de la table, qui peut ne pas vous intéresser, mais il en est l'exemple ...

- Nous continuons de privilégier l'image dans la DIV ...

Pour centrer l'image dans la DIV, j'ai décidé de faire sans les marges.
Par exemple, j'ai réussi à dire se concentrer sur l'image avec un saut de ligne, et j'ai obtenu un bon résultat.

Ensuite, j'ai assigné un remplissage (padding) qui entoure l'image au sein <td> </ td> dans une mesure équivalente à une division en trois de la couche plus ou moins, et j'ai obtenu le résultat de l'image ci-dessus, où les jeux "L'image dans la couche Div", et nous pouvons voir l'image ci-dessous comment l'air plus ou moins centré.

La partie qui est affichée dans le centre est l'image par le texte du lien que j'ai écrit auparavant. Si vous regardez le remplissage est fixé autour de l'image avec les valeurs de pourcentage qui raconte <td> données de la table avec des styles CSS dans le <td> tag, et dans le document HTML.

Vous pouvez voir ci-dessous le propieddes et les valeurs que j'ai assignée à <td>, le remplissage haute et basse de 32%, et un remplissage de la gauche - droite 32%, dont je SIUI l'image du texte par le lien, comme ci-dessus.

Les propriétés et les valeurs que j'ai utilisé; <img style="padding:32%;display:block;" />

Nous aurions pu affecté les marges d'image, mise dans une telle <td> align: center, et l'image de src="" /> <img une margin-top: 32% par exemple, mais j'ai utilisé un autre de manière différente aussi valable. Le display: block ne sont exactes à ce sujet pixels étirer latéralement, ce qui le rend meilleur à mon avis.

Des gens bien, j'espère que cela a servi à poster quelque chose, si vous avez autre chose que vous pouvez éclaircir certains points sur ce sujet, le mieux ...
Si je suis occupé avec quelque chose, et vous voyez teodioso, n'oubliez pas d'aller au supermarché pour acheter de la nourriture peut aller, en voiture, camion, vélo ou à pied, vous décidez ...

Je vous conseille de pratiquer avec les photos, vous remarquerez des choses que vous remarquerez, la pratique avec les valeurs du S et propriétés CSS, puis pris en compte certains points, sera capable de voir les différentes formes et méthodes de COOC une image, peut effectivement faire dans d'autres moyens, mais pas beaucoup ... si elles existent.