Version complète: sur le forum Webmaster Hub : rollover atypique
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
tetemagique
vendredi 3 novembre 2006 à 10:17
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.gif ...
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.gif
Topper
vendredi 3 novembre 2006 à 10:41
Alors là tu pars dans un truc super complexe... unsure.gif
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... smile.gif
tetemagique
vendredi 3 novembre 2006 à 10:55
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.gif
Topper
vendredi 3 novembre 2006 à 11:17
Je recommence... smile.gif

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

CODE
<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.

CODE
    <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.

CODE
    <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.

CODE
<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 : wink.gif

CODE
<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
vendredi 3 novembre 2006 à 11:41
merci infiniment, vraiment! J'essaie ca tout de suite
thumbs up pour Topper a_thumbsup_20.gif
Topper
vendredi 3 novembre 2006 à 12:01
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. wink.gif
tetemagique
vendredi 3 novembre 2006 à 13:01
blush.gif 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.gif
je reviens a la charge, mais la je suis un peu paume unsure.gif
tetemagique
vendredi 3 novembre 2006 à 14:22
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.gif
je sais plus quoi faire nonono.gif
Topper
vendredi 3 novembre 2006 à 15:01
CITATION(tetemagique @ vendredi 3 novembre 2006, 13h01) *
blush.gif 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.gif
je reviens a la charge, mais la je suis un peu paume unsure.gif


Ben là je vois qu'il y a un espace entre "java" et "script". C'est pas ça non ? unsure.gif
tetemagique
vendredi 3 novembre 2006 à 16:23
sad.gif 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:


CODE
<!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.gif
desole de mon ignorance, mais je m'attaque a qqe chose de tres dur... unsure.gif

<edit Monique>Merci de penser à utiliser les tags adéquats pour le code</edit>
ghost
vendredi 3 novembre 2006 à 19:23
Bonjour,

Et rien qu'en css non?

CODE

<!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
vendredi 3 novembre 2006 à 23:31
CITATION(tetemagique @ vendredi 3 novembre 2006, 16h23) *
sad.gif 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.gif
desole de mon ignorance, mais je m'attaque a qqe chose de tres dur... unsure.gif


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

Corrige :

CODE
onclick="java script:


Par:

CODE
onclick="java script:


Et aide toi d'un validateur plutôt de ce que te marque Dreamweaver.
Dudu
samedi 4 novembre 2006 à 06:40
CITATION(Topper @ samedi 4 novembre 2006, 00h31) *
Corrige :

CODE
onclick="java script:


Par:

CODE
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 smile.gif
tetemagique
samedi 4 novembre 2006 à 10:05
avec ou sans espace, c'est pareil, marche pas nonono.gif , y a autre chose qui coince... merci pour votre sollicitude quand meme.
je v essayer la technique de Ghost, je vous dis apres wink.gif
tetemagique
samedi 4 novembre 2006 à 10:47
smartass.gif 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) smile.gif

CODE
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.gif 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.gif
je suppose qu'il me faut un code supplementaire pour que i.e comprenne...ca va me rendre marteau wacko.gif
ghost
samedi 4 novembre 2006 à 12:30
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
tetemagique
samedi 4 novembre 2006 à 13:26
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 tongue.gif )
Je le mets la car je peux plus editer mon precedent post

CODE
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 smile.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.