rollover atypique

tetemagique · 3 Novembre 2006

salut a tous,

ca fait un bon moment que je cherche sur le net "comment faire un rollover sur une partie d'une grande image et que celle-ci change integralement", je ne trouve pas donc ca commence a me :shutup: ...

je m'explique: j'ai cree une page html composee d'un unique layer ou calque centre horizontalement. Ce layer a comme background une grande image (faite sur photoshop), je voudrais que lorsque la souris se deplace sur un endroit precis de l'image, toute l'image (fond d'ecran du layer) change pour une autre (de meme dimension).

Deja, est-ce possible? Et si oui comment faire? Car tous les sujets que j'ai pu ecumer sur forums ne parle que de rollover sur liens, boutons ou image entiere...

j'espere avoir ete le plus clair possible, merci d'avance :smartass:

Topper · 3 Novembre 2006

Alors là tu pars dans un truc super complexe... :unsure:

Il va falloir que tu fasses ça à l'aide de JavaScript.

La première solution qui vient à l'esprit est de détecter la position de la souris et en fonction de ça, lancer une fonction si l'interval x,y correspond à celui que t'as déterminé.

Seulement c'est loin d'être une bonne solution car chaque navigateur indique une position x,y différente du pointeur de la souris. Cela oblige de faire autant de variantes de ton script que de navigateurs.

La solution la plus simple reste donc la suivante :

- Commence par faire un DIV avec un ID dans lequel tu place une image en background via ses propriétés CSS.

- Dans ce même DIV tu en places un autre que tu positionnes à l'endroit que tu souhaites.

- Tu ajoutes un évènement onClick qui appele alors une fonction JavaScript qui changera l'image de fond.

- Histoire de faire les choses bien, passe l'ID de ton DIV (dont tu changes le fond) ainsi que l'adresse de l'image en paramètres.

Voila... bon courage...

tetemagique · 3 Novembre 2006

merci beaucoup topper...

En effet, ca parait tres complique... je suis desole, mais ca m'aiderait d'avoir la "marche a suivre" un peu plus detaillee :unsure:

Topper · 3 Novembre 2006

Je recommence...

- Commence par faire un DIV avec un ID dans lequel tu place une image en background via ses propriétés CSS.

<div id="conteneur_fond" style="background-image: url(Nintendo_Wii.jpg);width:640px;height:480px">

</div>

- Dans ce même DIV tu en places un autre que tu positionnes à l'endroit que tu souhaites.

	<div id="zone_interactive" style="width:320px;height:240px">

	</div>

- Tu ajoutes un évènement onClick qui appele alors une fonction JavaScript qui changera l'image de fond.

	<div id="zone_interactive" style="width:320px;height:240px" onclick="java script:changement_fond('conteneur_fond','Nintendo_DS.jpg');">

	</div>

- Histoire de faire les choses bien, passe l'ID de ton DIV (dont tu changes le fond) ainsi que l'adresse de l'image en paramètres.

<script type="text/javascript">
/*<![CDATA[*/
function changement_fond(id_element, adresse_image) {
	document.getElementById(id_element).style.backgroundImage="url("+adresse_image+")";
}

/*]]>*/
</script>

Et donc au final ça te donne ça :

<body>

	<script type="text/javascript">
	/*<![CDATA[*/
	function changement_fond(id_element, adresse_image) {
		document.getElementById(id_element).style.backgroundImage="url("+adresse_image+")";
	}

	/*]]>*/
	</script>

	<div id="conteneur_fond" style="background-image: url(Nintendo_Wii.jpg);width:640px;height:480px">

		<div id="zone_interactive" style="width:320px;height:240px" onclick="java script:changement_fond('conteneur_fond','Nintendo_DS.jpg');">

		</div>

	</div>

</body>

tetemagique · 3 Novembre 2006

merci infiniment, vraiment! J'essaie ca tout de suite

thumbs up pour Topper :thumbsup:

Topper · 3 Novembre 2006

Par contre petit bémol... je ne sais pas ce que tu veux faire avec ça mais n'utilise ceci que pour un aspect graphique.

Il ne faut pas que ce soit nécessaire à la navigation de ton site car si le JavaScript est désactivé, cela ne fonctionnera pas.

tetemagique · 3 Novembre 2006

:blush: desole mais visiblement, dreamweaver dans <div id="zone_interactive" style="width:320px;height:240px" onclick="java script:changement_fond('conteneur_fond','index2.jpg');"> me souligne en rouge a partir de onclick="java cript...", visiblement, il me fait une erreur code...

pourtant j'ai tout fait comme indique... qu'est-ce qui va pas avec ce javascript... :evil:

je reviens a la charge, mais la je suis un peu paume :unsure:

tetemagique · 3 Novembre 2006

pour etre plus precis, je dois dire que je veux que mon layer (qui fait 1024*769px) est centre horizontalement et verticalement au milieu de la page (largeur: 1280), donc en gros, mon code de depart, c'est:

#Layer1 {

position:absolute;

width:1024px;

height:769px;

z-index:1;

top: 50%;

left: 50%;

margin-left: -512px;

margin-top: -384.5px;

la technique barbare des marges negatives... ce layer doit avoir un fond d'ecran "index1.jpg", et quand la souris passe en haut de la page, le fond d'ecran change pour "index2.jpg"... enfin, en theorie, c'est ce que je voudrais... or, j'ai beau essaye dans tous les sens, ca marche pas!!!! :mad2:

je sais plus quoi faire :nonono:

Topper · 3 Novembre 2006

desole mais visiblement, dreamweaver dans <div id="zone_interactive" style="width:320px;height:240px" onclick="java script:changement_fond('conteneur_fond','index2.jpg');"> me souligne en rouge a partir de onclick="java cript...", visiblement, il me fait une erreur code...
pourtant j'ai tout fait comme indique... qu'est-ce qui va pas avec ce javascript...

je reviens a la charge, mais la je suis un peu paume

Ben là je vois qu'il y a un espace entre "java" et "script". C'est pas ça non ? :unsure:

tetemagique · 3 Novembre 2006

ben ce qui est sur c que j'ai fait une erreur dans le code... j'ai pas passe l'ID dans les parametres... j'ai pas trop pige le script la... cela vient il de ca?

je te mets le code complet de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:1024px;
	height:769px;
	z-index:1;
	top: 50%;
	left: 50%;
	margin-left: -512px;
	margin-top: -384.5px;
}
body {
	background-color: #000000;
}
-->
</style>
</head>

<body>

    <div id="conteneur_fond" style="background-image: url(index1.jpg);width:1024px;height:769px">

        <div id="zone_interactive" style="width:1024px;height:340px" onclick="java script:changement_fond('conteneur_fond','index2.jpg');">

        </div>

    </div>

</body>
</html>

voila, ca doit pas etre bon a +sieurs endroits peut etre :wacko:

desole de mon ignorance, mais je m'attaque a qqe chose de tres dur... :unsure:

<edit Monique>Merci de penser à utiliser les tags adéquats pour le code</edit>

ghost · 3 Novembre 2006

Bonjour,

Et rien qu'en css non?


<!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" lang="fr">

<head>
		<title>Test</title>
<style type="text/css">

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
	color: white;
	background-color: black;
}

.page {
    width: 400px;
    height: 250px;
    background: url(image1.jpg);
	position: relative;
    margin: auto;
	top: 150px;
}	

.page a{
    display: block;
    position: absolute;
    width: 87px; /* a définir*/
    height: 71px; /* a définir*/
    background: url(reactive.jpg);
	top: 45px; /* a définir*/
    left: 270px; /* a définir*/
}

.page a:hover{
	top:0;
    left:0;
    width: 400px;
    height: 250px;

    background: url(image2.jpg);
}

</style>

</head>

<body>
<div class="page">
<a href="#" ></a>



</div>

</body>
</html>

Topper · 3 Novembre 2006

ben ce qui est sur c que j'ai fait une erreur dans le code... j'ai pas passe l'ID dans les parametres... j'ai pas trop pige le script la... cela vient il de ca?
voila, ca doit pas etre bon a +sieurs endroits peut etre

desole de mon ignorance, mais je m'attaque a qqe chose de tres dur...

Non ben c'est bien ce que je dis... Il y a un espace !

Corrige :

onclick="java script:

Par:

onclick="java script:

Et aide toi d'un validateur plutôt de ce que te marque Dreamweaver.

Dudu · 4 Novembre 2006

Corrige :

onclick="java script:

Par:

onclick="java script:

Le forum (Invision Power Board) utilisé par Webmaster-Hub change le javascript en java script.

Il convient de retirer soi-même l'espace

tetemagique · 4 Novembre 2006

avec ou sans espace, c'est pareil, marche pas :nonono: , y a autre chose qui coince... merci pour votre sollicitude quand meme.

je v essayer la technique de Ghost, je vous dis apres

tetemagique · 4 Novembre 2006

:smartass: ok! Je crois que c'est tout ok, j'ai juste a changer un peu le code, mais c'etait ca, merci merci et bravo Ghost. Je vous met le code qui marche ici (si qqn a envie un jour de faire pareil)

html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: black;
}

.page {
width: 1024px;
height: 769px;
background: url(index1.jpg);
position: absolute;
margin-left:-512px;
margin-top:-384.5px;
top: 50%;
left: 50%;
}

.page a{
display: block;
position: absolute;
width: 1024px; 
height: 25%;
background: url(reactive.jpg);
top: 0px; 
left: 0px; 
}

.page a:hover{
top:0;
left:0;
width: 1024px;
height: 100%;
background: url(index2.jpg);
}

</style>

</head>

<body>
<div class="page">
<a href="#" ></a>



</div>

</body>
</html>

Voila!!!! Pourt voir le resultat: www.nellybellule.com (j'ai essaye que sur firefox, j'essaie avec i.e6 pour voir... mais ca a l'ait bon)

:wub: encore merci a tous (dites moi si c ok chez vous svp)

je savais bien que c'etait trop beau, le rollover marche pas sur ie6. Ce navigateur est vraiment une grosse m :shutup:

je suppose qu'il me faut un code supplementaire pour que i.e comprenne...ca va me rendre marteau :wacko:

Modifié 4 Novembre 2006 par tetemagique

ghost · 4 Novembre 2006

Bonjour,

Ton code fonctionne sous IE, c'est juste un problème de préload d'image, au lieu de 2 images de fond, tu pourrais en utiliser une composée de l'image 1 + l'image 2 à la suite et de la positionner avec background:url("fond.jpg"); background-position:0px 0px;

pour le fond1 et background:url("fond.jpg");background-position:0px -769px; pour le hover.

Cela devrait, je pense régler ton problème.

Bon courage

Ps tu peux utliser un gif transparent comme zone réactive

Modifié 4 Novembre 2006 par ghost

tetemagique · 4 Novembre 2006

bon! Apres avoir fait des derniers reglages j'en suis arrive a ce code (qui marche aussi sur i.e, faut juste avoir une connection correcte )

Je le mets la car je peux plus editer mon precedent post

html, body {
	background-color: black;
}

.page {
width: 970px;
height: 729px;
background: url(index1.jpg);
position: absolute;
left:50%;
top:50%;
margin-left:-485px;
margin-top:-364.5px
}

.page a{
display: block;
position: absolute;
width: 970px; 
height: 33%;
background: url(reactive.jpg);
top: 0px; 
left: 0px; 
}

.page a:hover{
top:0;
left:0;
width: 970px;
height: 100%;
background: url(index2.jpg);
}

</style>

</head>

<body>
<div class="page">
<a href="#" ></a>



</div>

</body>
</html>

ca marche... mais j'ai pas utilise de "reactive.jpg", je vois pas quoi mettre (les gif transparents marchent sur firefox mais il me semble que ca marche pas sur i.e...)

voila, je crois que le code peut pas etre beaucoup plus simplifie... je suis deja assez content que ca marche

Connexion

rollover atypique

Sujets conseillés

tetemagique

Topper

tetemagique

Topper

tetemagique

Topper

tetemagique

tetemagique

Topper

tetemagique

ghost

Topper

Dudu

tetemagique

tetemagique

ghost

tetemagique

Veuillez vous connecter pour commenter

Parcourir

Activité