Effet survol de la souris sur un lien texte = affichage image

Question

Salut,

Voila un code modifié et testé pour un seul bloque. Il marche bien.

A present, je voulais essayer d'avoir deux bloques l'un à coté de l'autre, mais je n'y arrive pas :





Tab verticales


body {
font-size: 90%;
font-family: arial, helvetica, sans-serif;
}
h1 {text-align: center; color: #f00;}
h3 {
text-align: left;
color: #f00;
font-size: 12px;
}
#articles {
position : relative;
border: 1px solid #000;
width: 352px; height : 123px;
}
#articles h3, #articles h3 a {color: #900; }
/*.hasJS #articles {min-height:200px;}*/
.hasJS #articles h3 {
cursor: pointer; 
background-color: #999; 
margin: 0; 
padding: 5px; 
border-bottom:  #fff 1px solid; 
border-right:  #fff 1px solid;
width:190px;
height:30px;
}
.hasJS #articles h3.selected {
background-color: #E5E5E5;
border-right: #fff 1px solid;
}
.hasJS #articles div div.montre {position: absolute; top: 0; right: 0; left: 196px; }
.hasJS #articles div div {position: absolute; top: -5000px; left: -5000px; padding-left: 5px;}
.imag {	width:150px; height:122px;}
a:link, a:visited, a:active{text-decoration: none;color: #333333;}


document.documentElement.className+=" hasJS";




Tab verticales

Une série de h3 en tab horizontales





[# Massacre aux Philippines: le clan a tué 200 autres personnes]










[# Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis 
suivent]










[# Johnny Hallyday hospitalisé à Los Angeles]










    



[# Massacre aux Philippines: le clan a tué 200 autres personnes]










[# Le patronat européen prêt à des efforts sur le CO2 si les Etats-Unis 
suivent]








        




[# Johnny Hallyday hospitalisé à Los Angeles]












$(document).ready( function () {
//tabindex pour la navigation au clavier
$("#articles h3").attr("tabindex", "0");
$("#articles h3").focus (
function () {
//trucs à faire pendant le focus sur les h3
$("#articles div.montre").removeClass("montre");
$("#articles h3.selected").removeClass("selected");
$(this).next("div").addClass("montre");
$(this).addClass("selected");
}
);
// gestion des hover sur les h3 :
$("div.article h3").hover( 
function () {
//trucs à faire pendant le over sur les h3
$("#articles div.montre").removeClass("montre");
$("#articles h3.selected").removeClass("selected");
$(this).next("div").addClass("montre");
$(this).addClass("selected");
},
function () {
//out : trucs à faire éventuellement quand le pointeur sort du h3
}
);
});




Mais il y'a un problème de "id"  de la div conteneur.

/


Il faut donner a chaque div son identificateur propre, mais comment sera le code jQuery qui traitera chaque div a part ?




-----------------------------------------
Debutant Excel/VBA, PHP/SQL, Delphi

Club de correspondance :
http://membres.lycos.fr/elatlasclub
-----------------------------------------

rastasponch · Answer

Salut,
A mon avis tu devrais posté dans javascriptfr plutôt qu'ici !
Sinon, en php, tu pourra généré une liste de nom du type

for ($i = 0; $i < $nb_tot_article;$i++){
     echo '
';
}

...par exemple. Après, pour jQuery, j'imagine qu'il te faudra aussi généré le code convenant pour chaque article.. probablement à l'aide d'une boucle aussi.

Effet survol de la souris sur un lien texte => affichage image

1 réponse

Votre réponse

Discussions similaires