[résolu]Images :hover (4x2)

Nogi · le 17 mars 2008

Bonsoir,

J'ai un set d'images utilisées en :hover. J'aimerais rajouter 3 autres sets d'images avec le même principe. Si j'utilise le même code, je changes les images, mais il doit y avoir un # à ajouter à l'intérieur du code, mais où? Car si je ne change que les images(avec le même code), c'est le 1er set qui se répète.

Merci de votre aide!

Nogi

Voici:

Set d'images 1

<html>

<head>

.roll a {

display:block;

width:200px;

height:150px;

background:url("http://a212.ac-images.0001.jpg");}

.roll a:hover {

background:url("http://a693.ac-images.0002.jpg");}

</style>

</head>

<body>

</div>

</body>

</html>

Set d'images 2

<html>

<head>

.roll a {

display:block;

width:150px;

height:200px;

background:url("http://a258.ac-images.0003.jpg");}

.roll a:hover {

background:url("http://a967.ac-images.0004.jpg");}

</style>

</head>

<body>

</div>

</body>

</html>

Set d'images 3

etc

Set d'images 4

Fin

Modifié le 28 mars 2008 par Nogi

Dylav · le 17 mars 2008

Je ne saisis pas bien ce que tu entends par « sets d'images ». Si tu veux parler de plusieurs paires d'images que tu veux intégrer dans une même page HTML, il te faudra associer un identifiant différent à chaque paire, puisque c'est dans la feuille de style que tu fournis les adresses des différentes images. Dans ce cas, plutôt que d'utiliser une classe (qui par définition serait utilisable à plusieurs endroits de la page, mais qui y afficherait la même paire d'images), il me semble plus approprié d'utiliser des identifiants uniques, ou id, un par paire d'images. Voici alors un résumé du code pour deux paires (il te suffira de prolonger la méthode)

<html>
<head>
<title>Essai :hover multiple</title>
<style type="text/css">
#roll12 a {
 display:block;
 width:200px;
 height:150px;
 background:url("http://a212.ac-images.0001.jpg");
 }
#roll12 a:hover {
 background:url("http://a693.ac-images.0002.jpg");
 }
#roll34 a {
 display:block;
 width:150px;
 height:200px;
 background:url("http://a258.ac-images.0003.jpg");
 }
#roll34 a:hover {
 background:url("http://a967.ac-images.0004.jpg");
 }
</style>
</head>
<body>
<div id="roll12">
<a href="#"></a>
</div>
<div id="roll34">
<a href="#"></a>
</div>
</body>
</html>

Remarques

Tu devrais étudier les bases de la programmation HTML*. Dans ton post, tu décris quatre pages différentes. En quelques mots, une page est limitée par les balises <html> et </html>. Elle contient deux parties, une entête (située entre les balises <head> et </head>, qui contient en particulier le titre de la page, la feuille de style, etc.), et un corps (situé entre les balises <body> et </body>, qui décrit les éléments contenus dans la page).
Un id est préfixé, dans la feuille de style, par un dièse (alors qu'une class est préfixée par un point). Dans notre exemple, les deux blocs <div>, ont respectivement pour identifiants roll12 (qui affichera les images 1 et 2, grâce à la déclaration #roll12 dans la feuille de style) et roll34 (qui affichera les images 3 et 4, grâce à #roll34).

__________

* Je te conseille en particulier le tutoriel HTML/CSS du très réputé Site du zérO

Dylav · le 30 mars 2008

Nogi m'a envoyé un MP que je reproduis en partie ici (avec sa permission), car il soulève des questions qu'il n'est pas inintéressant de résoudre sur le forum plutôt qu'en privé (comme l'explique clairement TheClem ici).

[…] Avec le code que vous m'aviez donné, j'ai réussi à trafiquer pour en arriver au résultat que je voulais. En fait, je ne travaille pas sur un site web conventionnel que j'aurais moi-même réalisé, alors je n'ai pas de feuilles .html et .css (disons que j'ai cherché pour y arriver, car je suis débutant).

En plus, je voulais rajouter du texte entre les images (procédé archaïque, mais bon, ça fonctionne) ! Voici ce que ça m’a donné :

<p><i><b><font color="F5A200" face="Times New Roman", 
Verdana, serif">Texte</b></i></font></p> 

<head>
<style type="text/css">
.roll12 a
{ 
background:url("http://....image001.jpg"); 
width:150px; 
height:200px; 
display:block; 
} 
.roll12 a:hover 
{ 
background:url("http://....image002.jpg"); 
} 
</style>
</head>
<body>
<div class="roll12">
<a href="#" alt="Photo - Band" title="Texte"></a>
</div>
</body>

<p><i><b><font color="F5A200" face="Times New Roman", 
Verdana, serif">Texte</b></i></font></p>

<head>
<style type="text/css">
.roll34 a
{ 
background:url("http://....image003.jpg"); 
width:200px; 
height:150px; 
display:block; 
} 
.roll34 a:hover 
{ 
background:url("http://....image004.jpg"); 
} 
</style>
</head>
<body>
<div class="roll34">
<a href="#" alt="Photo - Band" title="Texte"></a>
</div>
</body>
. . . 
[ texte ]
[.roll56 ]
. . .
[ texte ]
[.roll78 ]
. . .

[…] J'ai aussi visité et commencé les exercices du site du Zéro tel que suggéré. Je comprends mieux maintenant les aspects de vos réponses et explications.

J'ai aussi trouvé comment faire pour écrire [résolu]. J'ai vérifié, c'est mentionné. […]

Dylav · le 30 mars 2008

Bonjour Nogi,

Tout d'abord, comme je te le faisais remarquer dans ma réponse à ton MP, n'hésite pas à me tutoyer, il semble que ce soit la règle sur le WEB, et je suis toujours très gêné de tutoyer quelqu'un qui me vouvoie.

Pour en venir à ton problème résolu, je dois avouer que je suis ébahi que ça fonctionne, plus encore par rapport à FireFox qu'avec Internet Explorer. Comme quoi les navigateurs sont extrêmement permissifs...

Comme je te l'expliquais dans mon message précédent, une page HTML (débutant par une balise <html> et se terminant par une balise </html>), est composée d'une entête (débutant par une balise <head> et se terminant par une balise </head>), et d'un corps (débutant par une balise <body> et se terminant par une balise </body>).

Mettons donc un peu d'ordre dans le code qe tu as écrit (clique pour agrandir) :

Rapatrions le second bloc d'éléments de style dans la première entête,
Rapatrions le second bloc <div> dans le premier corps,
Rapatrions chaque paragraphe <p> de texte dans le bloc <div> contenant les images images qu'il commente,
Et tout se retrouve alors dans l'encadré rouge, la page HTML, limitée par ses balises de début et de fin.

Sans vouloir ni te vexer ni me faire mousser, nous allons quasiment retrouver la structure de page que je te proposais dans mon message précédent, avec néanmoins une nouveauté, les paragraphes explicatifs. Pour les rendre plus propres, nous allons déplacer leurs éléments de présentation dans la feuille de style (grâce à la classe "commentaire"). Je réinsiste sur le choix entre identifiant unique id et classe class, en l'appliquant concrètement,

un id pour chacun des blocs <div> (puisqu'ils décrivent des images spécifiques),
une class pour les paragraphes <p> (puisqu'ils ont les mêmes caractéristiques de présentation).

<html>
<head>
<title>Essai :hover multiple</title>
<style type="text/css">
#roll12 a {
 display:block;
 width:200px;
 height:150px;
 background:url("http://...image001.jpg");
}
#roll12 a:hover {
 background:url("http://...image002.jpg");
}
#roll34 a {
 display:block;
 width:150px;
 height:200px;
 background:url("http://...image003.jpg");
}
#roll34 a:hover {
 background:url("http://...image004.jpg");
}
.commentaire {
 font-family:"Times New Roman", Verdana, serif; # polices
 font-weight:bold;                              # gras
 font-style:italic;                             # italique
 color:#F5A200;                                 # couleur
}
</style>
</head>
<body>
<div id="roll12">
<p class="commentaire">Texte commentant les images 1 et 2</p>
<a href="#" alt="Photo - Band" title="Texte"></a>
</div>
<div id="roll34">
<p class="commentaire">Texte commentant les images 3 et 4</p>
<a href="#" alt="Photo - Band" title="Texte"></a>
</div>
</body>
</html>

A toi de voir maintenant si le sujet est totalement résolu

Nogi · le 30 mars 2008

Bonsoir Dylav,

Tu ne m'as pas vexé, bien au contraire, je suis ici pour apprendre. Mais cette fois-ci, j'espère

que c'est moi qui ne te vexeras pas. J'ai essayé le code et non, ça ne fonctionne pas. Vraiment bizarre!

En l'incorporant dans la section en question, il n'y a pas de photos. Tout ce qu'il y a, ce sont les

5 commentaires(au fait, j'en ai rajouté un à la fin!). Même en enlevant les balises; <html></html>

et <title></title>, il n'y a toujours que les 5 commentaires.

Alors, pour être certain que ça fonctionnait, j'ai fait une page avec bloc-notes, en recopiant

ton code(et mon petit rajout) et c'est fonctionnel(!!!). Tu peux essayer si tu veux!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"<!-- Rappel : "lang" = fr(français) ou en(englais) -->
  <head>
      <title>Band</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
<head>
<title>Essai :hover multiple</title>
<style type="text/css">
#roll12 a 
{  
display:block;  
width:150px;  
height:200px;  
background:url("http://a566.ac-images.myspacecdn.com/images01/71/l_e57d77e9c5e5eecc38a548c39119367d.jpg"); 
}
#roll12 a:hover 
{  
background:url("http://a81.ac-images.myspacecdn.com/images01/28/l_ea42b5fe69401ce2ebe12455a3b9dbd0.jpg"); 
}
#roll34 a 
{  
display:block;  
width:200px;  
height:150px;  
background:url("http://a62.ac-images.myspacecdn.com/images01/78/l_2769039829036479d6ffdd679717fadd.jpg"); 
}#roll34 a:hover 
{  
background:url("http://a798.ac-images.myspacecdn.com/images01/102/l_3a35b99cac9cea411757855e6181441d.jpg"); 
}
#roll56 a 
{  
display:block;  
width:200px;  
height:150px;  
background:url("http://a876.ac-images.myspacecdn.com/images01/73/l_30ed66180a01f77a0c2a9aebd53e255b.jpg"); 
}#roll56 a:hover 
{  
background:url("http://a105.ac-images.myspacecdn.com/images01/112/l_75749b1e5b0831dc227302f3ff809570.jpg"); 
}
#roll78 a 
{  
display:block;  
width:150px;  
height:200px;  
background:url("http://a529.ac-images.myspacecdn.com/images01/112/l_15c5a4b1e6f5fc4b2d3c4c2be1c072d8.jpg"); 
}#roll78 a:hover 
{  
background:url("http://a374.ac-images.myspacecdn.com/images01/13/l_822922f2b6b26f9116b2a801faa7e165.jpg"); 
}
.commentaire 
{  
font-family:"PR Uncial","Times New Roman", Verdana, serif; 
font-size:0.7em;   
font-weight:bold;                 
font-style:italic;                
color:#F5A200;              
}
.nogi 
{  
font-family:"PR Uncial", "Times New Roman", Verdana, serif;  
font-size:0.5em;  
font-weight:bold;             
font-style:italic;                
color:#F5A200;          
}
.résultat, .bouchon
{
font-family:"Courier New";
font-size:0.8em;
text-indent:15px;   
}
</style>
</head>
<body>
<div id="roll12">
<p class="commentaire">Marc - Bass & Lead Vocals</p>
<a href="#" alt="Photo - Band" title="Photo - Bio.Marc"></a>
</div>
<div id="roll34">
<p class="commentaire">*Gino - Drums</p>
<a href="#" alt="Photo - Band" title="Photo - Bio.Gino"></a>
</div>
<div id="roll56">
<p class="commentaire">Claude - Rhythm Gtr & Back Vocals</p>
<a href="#" alt="Photo - Band" title="Photo - Bio.Claude"></a>
</div>
<div id="roll78">
<p class="commentaire">Alex - Lead Gtr</p>
<a href="#" alt="Photo - Band" title="Photo - Bio.Alex"></a>
</div>
<p class="nogi">*Nogi - MSwebsite html, fotos & vids</p>
<p class="résultat"><i><u>Résultat</u>:</i> www.myspace.com/urmusics.... (retour de l'ancien code, pour l'instant!)</p>
<p class="bouchon"><i><u>Attention</u>:</i> faudra p-e mettre des bouchons: <i><u>rock alternatif</u>!</i></p></br>
</body>
</html>

Je te donne, d'après une autre section de ce site, la manière dont débute le code de la page,

p-e cela pourra-t-il t'orienter un peu plus sur le genre de disposition qu'il me(nous) resteraient

à apporter au début/fin du code: (j'aimerais bien qu'on trouve l'astuce, .... visuellement plus

professionnel!)

<html>(-?)

<title>(-?)

</title>(-?)

<head>

<style>

{

Ton code

}

</style>

</head>

<body>(?)

</body>(?)

</html>(-?)

Code :

<style type="text/css"> body {background-color:000000; background-image:url("http://....jpg"); 
background-position:center center; background-repeat:no-repeat; background-attachment:fixed;}; table, 
tr, td {background:transparent; border:0px;} table table table {background-color:none;} table table 
table { border-width:2px; border-color:EA2E39; border-style:solid; } .... etc! (écrit sous forme de
textes, et non verticalement!)

Il y a aussi un code vidéo:

<div><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" 
height="350" width="425" style="width:400px;height:300px" align="middle" etc! ... </object> + qq autres paramètres!
Ça commence directement comme ça; sans <head></head>, ni <body></body> (et à la fin aussi!)

En étudiant la section <div></div>, j'ai aussi compris pourquoi(et c'est ce que je voulais) les

commentaires étaient au-dessus des photos:

<div> 
<p class...>
<a href....>
</div>

Good! Good! Good! ....

Et aussi pour les explications sur "class" et "id", ça commence à entrer!

PS.: Je sais aussi que je ne devrais pas utilisé la police "PR Uncial" , mais bon, ça me plaît, et au pire,

il restera les autres... et serif.

Merci!

Nogi

Dylav · le 31 mars 2008

Bonjour Nogi,

Tout le mécanisme fonctionne parfaitement : je viens de tester ton code tel quel, en remplaçant tes images par des images à moi. Alors, la seule hypothèse qui me semble plausible, c'est que les URL que tu donnes pour tes images sont erronées. Pour le vérifier, prends une des 8 URL au hasard et, par copier/coller, place-la dans la fenêtre adresse de ton navigateur : si tu te retrouves avec un message « Impossible d'afficher la page », ce n'est pas bon (je ne peux pas le faire d'ici, mon proxy m'interdit l'accès au site qui les héberge) !

Mais je vois que tu es passé à la vitesse supérieure, avec plein d'ambition : une DOCTYPE, un charset...

Maintenant, il va falloir que tu vérifies ta page avec le validateur du W3C. Je te laisse y découvrir les quelques erreurs qui s'y trouvent, pas bien méchantes !

Nota :

la balise <u> n'est plus supportée en XHTML, et il faut passer par la clause de style text-decoration:underline; d'une classe souligner par exemple, <span class="souligner"><i>Résultat:</i></span> (le bloc <span> est inline, c'est-à-dire qu'il ne provoque pas un retour à la ligne) : il faut avoir vraiment envie de souligner !
un copier/coller un peu rapide t'a donné deux entêtes… avec deux titres de page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title>Band</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<head>

<title>Essai :hover multiple</title>

<style type="text/css">

[…]

Nogi · le 31 mars 2008

Bonjour encore!

dylav à écrit:

« Tout le mécanisme fonctionne parfaitement : je viens de tester ton code tel quel, en remplaçant tes images par des images à moi. Alors, la seule hypothèse qui me semble plausible, c'est que les URL que tu donnes pour tes images sont erronées. Pour le vérifier, prends une des 8 URL au hasard et, par copier/coller, place-la dans la fenêtre adresse de ton navigateur : si tu te retrouves avec un message « Impossible d'afficher la page »

Je viens d’essayer les images dans la barre d’adresse et elles fonctionnent. Ma manière pour avoir les url est d’uploader les photos dans la section (photo) interne. En plaçant le curseur sur ladite photo, en cliquant à droite sur la souris(pour "propriété"), une petite fenêtre s’ouvre et me donne une url du genre : (http://a62.ac-images.myspacecdn.com/images01/78/l_2769039829036479d6ffdd679717fadd.jpg) .... et après, je la(les) place(nt) dans la section qui m'intéresse, avec les balises <p> et <img /> .... ex.: <p><img src="http://a62....jpg" /></p> .... J’ai fait la même chose avec les 8 photos que j’ai utilisé, pour insérer ces url dans mon fameux code archaïque!

Je remets le code qui fonctionne actuellement, faudra que j’essais de placer les balises <head> et <body> pour que ton code soit OK!

<p><i><b><font color="F5A200" face="PR Uncial", "Times New Roman", 
Verdana, serif">Marc - Bass & Lead Vocals</font></b></i></p> 

<head>
<style type="text/css">
.roll12 a
{ 
background:url("http://....image001.jpg"); 
width:150px; 
height:200px; 
display:block; 
} 
.roll12 a:hover 
{ 
background:url("http://....image002.jpg"); 
} 
</style>
</head>
<body>
<div class="roll12">
<a href="" alt="Photo - Band" title="Photo - Bio.Marc"></a>
</div>
</body>

<p><i><b><font color="F5A200" face="PR Uncial", "Times New Roman", Verdana, serif">
*Gino - Drums</font></b></i></p>

<head>
<style type="text/css">
.roll34 a
{ 
background:url("http://a62.ac-images.myspacecdn.com/images...d679717fadd.jpg"); 
width:200px; 
height:150px; 
display:block; 
} 
.roll34 a:hover 
{ 
background:url("http://....image004.jpg"); 
} 
</style>
</head>
<body>
<div class="roll34">
<a href="" alt="Photo - Band" title="Photo - Bio.Gino"></a>
</div>
</body>

<p><i><b><font color="F5A200" face="PR Uncial", "Times New Roman", Verdana, serif">
Claude - Rhythm Gtrs & Back Vocals</font></b></i></p>

<head>
<style type="text/css">
.roll56 a
{ 
background:url("http://....image005.jpg"); 
width:200px; 
height:150px; 
display:block; 
} 
.roll56 a:hover 
{ 
background:url("http://....image006.jpg"); 
} 
</style>
</head>
<body>
<div class="roll56">
<a href="" alt="Photo - Band" title="Photo - Bio.Claude"></a>
</div>
</body>

<p><i><b><font color="F5A200" face="PR Uncial", "Times New Roman", Verdana, serif">
Alex - Lead Gtrs</font></b></i></p>

<head>
<style type="text/css">
.roll78 a
{ 
background:url("http://....image007.jpg"); 
width:150px; 
height:200px; 
display:block; 
} 
.roll78 a:hover 
{ 
background:url("http://....image008.jpg"); 
} 
</style>
</head>
<body>
<div class="roll78">
<a href="" alt="Photo - Band" title="Photo - Bio.Alex"></a>
</div>
</body>

<p><i><b><font color="F5A200" face="PR Uncial", "Times New Roman", 
Verdana, serif">*Nogi - MSwebsite html, fotos & vids</font></b></i></p></br

Ahhh!! Pourquoi faire compliqué, quand ça pourrait être si simple : <i><u>Résultat</u> :</i> …. Mais bon, je comprends et à l’avenir, j’utiliserais ton exemple! <span>

" la balise <u> n'est plus supportée en XHTML, et il faut passer par la clause de style text-decoration:underline; d'une classe souligner par exemple, <span class="souligner"><i>Résultat:</i></span> (le bloc <span> est inline, c'est-à-dire qu'il ne provoque pas un retour à la ligne) : il faut avoir vraiment envie de souligner ! "

Et on continue!

Nogi

Dylav · le 31 mars 2008

Bonsoir Nogi !

J'avoue que je ne comprends absolument pas où est ton problème.

Je viens en effet de tester l'accès à tes images : je les atteins.

Quant à ta page, elle fonctionne parfaitement sous FireFox et sous Internet Explorer.

J'en ai profité pour parfaire ton code, et tu en trouveras le résultat ci-dessous,

qui donne un sans-faute à la validation du W3C !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<!-- Rappel : "lang" = fr(français) ou en(english) -->
<head>
<title>Band</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#roll12 a
{
display:block;
width:150px;
height:200px;
background:url("http://a566.ac-images.myspacecdn.com/images01/71/l_e57d77e9c5e5eecc38a548c39119367d.jpg");
}
#roll12 a:hover
{
background:url("http://a81.ac-images.myspacecdn.com/images01/28/l_ea42b5fe69401ce2ebe12455a3b9dbd0.jpg");
}
#roll34 a
{
display:block;
width:200px;
height:150px;
background:url("http://a62.ac-images.myspacecdn.com/images01/78/l_2769039829036479d6ffdd679717fadd.jpg");
}
#roll34 a:hover
{
background:url("http://a798.ac-images.myspacecdn.com/images01/102/l_3a35b99cac9cea411757855e6181441d.jpg");
}
#roll56 a
{
display:block;
width:200px;
height:150px;
background:url("http://a876.ac-images.myspacecdn.com/images01/73/l_30ed66180a01f77a0c2a9aebd53e255b.jpg");
}
#roll56 a:hover
{
background:url("http://a105.ac-images.myspacecdn.com/images01/112/l_75749b1e5b0831dc227302f3ff809570.jpg");
}
#roll78 a
{
display:block;
width:150px;
height:200px;
background:url("http://a529.ac-images.myspacecdn.com/images01/112/l_15c5a4b1e6f5fc4b2d3c4c2be1c072d8.jpg");
}
#roll78 a:hover
{
background:url("http://a374.ac-images.myspacecdn.com/images01/13/l_822922f2b6b26f9116b2a801faa7e165.jpg");
}
.commentaire
{
font-family:"PR Uncial","Times New Roman", Verdana, serif;
font-size:0.7em;
font-weight:bold;
font-style:italic;
color:#F5A200;
}
.souligner
{
text-decoration:underline;
}
.nogi
{
font-family:"PR Uncial", "Times New Roman", Verdana, serif;
font-size:0.5em;
font-weight:bold;
font-style:italic;
color:#F5A200;
}
.résultat, .bouchon
{
font-family:"Courier New";
font-size:0.8em;
text-indent:15px;
}
</style>
</head>
<body>
<div id="roll12">
<p class="commentaire">Marc - Bass & Lead Vocals</p>
<a href="#" title="Photo - Bio.Marc"></a>
</div>
<div id="roll34">
<p class="commentaire">*Gino - Drums</p>
<a href="#" title="Photo - Bio.Gino"></a>
</div>
<div id="roll56">
<p class="commentaire">Claude - Rhythm Gtr & Back Vocals</p>
<a href="#" title="Photo - Bio.Claude"></a>
</div>
<div id="roll78">
<p class="commentaire">Alex - Lead Gtr</p>
<a href="#" title="Photo - Bio.Alex"></a>
</div>
<p class="nogi">*Nogi - MSwebsite html, fotos & vids</p>
<p class="résultat"><i><span class="souligner">Résultat</span> :</i>
www.myspace.com/urmusics...</p>
<p class="bouchon"><i><span class="souligner">Attention</span> :</i>
faudra p-e mettre des bouchons : 
<i><span class="souligner">rock alternatif</span> !</i></p>
</body>
</html>

Pour te convaincre que ce code fonctionne parfaitement selon tes spécifications, je vais te demander de faire très exactement ce qui suit :

tu ouvres le bloc-notes,
tu sélectionnes la totalité du code ci-dessus, que tu copies par CTRL+C,
tu le colles dans le bloc-notes par CTRL+V,
tu l'enregistres dans un fichier que tu nommes par exemple NOGI.HTML,
tu double-cliques sur NOGI.HTML

Si ton navigateur n'affiche pas exactement ce que tu attendais, je ne peux plus rien pour toi…

Enfin, deux remarques sur la validation du source :

- le & (“et commercial”) doit être codé & dans les commentaires,

- pour la balise <a>, l'attribut alt n'existe pas (ou plus) en XHTML Strict.

Nogi · le 1 avril 2008

[résolu]

Bonjour dylav,

Merci pour toutes tes explications et tes codes. Bien aimable! Comme je l'ai mentionné dans un message précédent, j'avais essayé le code avec bloc-notes et ça fonctionnait aussi. Mais sur le site en question(...myspace.com), ça ne fonctionne pas(????). La section où j'ai mis les images ne semble pas fonctionné de manière standard(Présentement, ça fonctionne avec mon code archaique!). J'aimerais bien te démontrer mes dires à l'écran, mais bon, disons que c'est assez impossible!

J'espère ne pas trop avoir abusé de ton temps et un gros Merci pour ta patience!

PS: Mais je vais avoir d'autre(s) question(s) ultérieurement, à propos du site que je suis(veux) en train de monter(avec Notepad)!

Nogi a la prochaine!

Dylav · le 1 avril 2008

A bientôt, Nogi, ce sera avec plaisir

Connexion

Pas encore inscrit ?

[résolu]Images :hover (4x2)

Messages recommandés

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Nogi

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer