Aller au contenu

rollover atypique

tetemagique

Par tetemagique
dans (X)HTML et CSS

 Partager

Sujets conseillés

tetemagique

tetemagique

Posté
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
Topper

Topper

Posté
Posté

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... :)

Lien vers le commentaire
Partager sur d’autres sites
Topper

Topper

Posté
Posté

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>

Lien vers le commentaire
Partager sur d’autres sites
Topper

Topper

Posté
Posté

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. ;)

Lien vers le commentaire
Partager sur d’autres sites
tetemagique

tetemagique

Posté
  • Auteur
Posté

: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:

Lien vers le commentaire
Partager sur d’autres sites
tetemagique

tetemagique

Posté
  • Auteur
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
Topper

Topper

Posté
Posté
: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:

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

Lien vers le commentaire
Partager sur d’autres sites
tetemagique

tetemagique

Posté
  • Auteur
Posté

:( 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>

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

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>

Lien vers le commentaire
Partager sur d’autres sites
Topper

Topper

Posté
Posté
:( 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 :wacko:

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

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.

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté
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 :)

Lien vers le commentaire
Partager sur d’autres sites
tetemagique

tetemagique

Posté
  • Auteur
Posté (modifié)

: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é par tetemagique
Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté (modifié)

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é par ghost
Lien vers le commentaire
Partager sur d’autres sites
tetemagique

tetemagique

Posté
  • Auteur
Posté

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 :P )

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 :)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...