[RESOLU] Faire un rollover sur une autre partie de l'ecran

Bonjour à toutes et à tous,

Voilà mon problème:

J'ai un menu en haut de mon site (menu en css) et je voudrais qu'au passage d'un lien il affiche une image sur une autre partie de l'écran.

Pour l'instant je le gère en js mais si je pouvais l'avoir en CSS çà serait cool et si en plus je pouvais avoir le préchargement d'images ... là ce serait le pied .

Donc je m'en remet aux connaisseurs

Merci par avance
Modifié par chintaoui (22 Jul 2005 - 13:15)

Salut !

Conserve ton JavaScript
C'est fait pour ça !

Par contre, par curiosité, je veux bien voir ton code, histoire d'être sûr que c'est fait propre et net et que la désactivation du JavaScript n'empeche pas l'accès au contenu

La désactivation du javascript ne gene pas l'accès car comme je précharge les images avec ce code

<script language="javascript" type="text/javascript">
		/* Preload of pictures */
		image1 = new Image;
		image1.src = "./pictures/banner1.jpg";
		image2 = new Image;
		image2.src = "./pictures/banner2.jpg";
		image3 = new Image;
		image3.src = "./pictures/banner3.jpg";
		image4 = new Image;
		image4.src = "./pictures/banner4.jpg";
		image5 = new Image;
		image5.src = "./pictures/banner5.jpg";
	</script>

Si le javascript est désactivé, pas de préchargement donc pas de rollover.

Après voilà où je m'en sers

<li><a href="./toto.htm" id="toto" onmouseover="nomimage1.src=image3.src" onmouseout="nomimage1.src='./pictures/banner1.jpg'">About Albania</a></li>

avec nomimage1 le nom que j'ai donné à mon image par défaut (qui ne change donc pas si le JS est désactivé).

Si vous avez des suggestions ou des améliorations je suis preneur

Supprimes le "language="javascript", ça ne sert à rien et c'est déprécié

Pour le preload, hmm ma foi, si tu veux

Pour le roll over, euh... oui, c'est une façon de voir

Si tu as une meilleure façon de gérer çà, éclaire moi, je suis plus qu'intéressé

Bah, nan, ça marche ça

Le mieux c'est d'extraire totalement le code JavaScript de la source HTML

<li id="activateroll">...</li>
...........

........
...
<img id="tonimage" src="..." />

function makeRollOver()
{
var myRoller = document.getElementById('activateroll');
var myImg = document.getElementById('tonimage');

myRoller.onmouseover = function()
{
myImg.src = 'uneautreimage.jpg';
};

myRollver.onmouseout = function()
{
myImg.src = 'imagedebase.jpg';
};
}

window.onload = makeRollOver;

Tu me diras que ça complique pas mal la tâche et tu n'auras pas forcément tort, MAIS :
* le fait d'avoir d'un côté le code HTML et de l'autre le code JavaScript te permet plus de souplesse dans les modifications eventuelles. Tu n'as qu'un fichier JS à gérer si tu as ce genre de manip sur plusieurs pages, tu n'as qu'un ID à indiquer au <li> (ou autre) et tout ce gère à part.
* ça te permet de gérer plusieurs roll over en même temps avec la même et unique fonction, il faudrait paramétrer la fonction pour gérer plus finement les différentes choses
* tu peux supprimer l'effet simplement en coupant l'accès au script plutôt que d'aller farfouiller dans la source HTML etc

OK je te remercie je vais me pencher sur çà alors

Pour le fun


html :

<div>
<a href="...">
texte du lien
<span> </span> /* patapé  [biggol]  */
</a>
</div>

css :

a {
text-decoration:none;/*pour ne pas être embêté*/
}

a:hover span {
display:block;
position:absolute;
top:15px;
right:15px;
width:50px; /*dimensions de l'image*/
height:50px;
background-image:url(imglink.jpg);
}

Modifié par clb56 (22 Jul 2005 - 11:11)