Bonjour,
Je ne sais pas si mon message est au bon endroit !
J'utilise Publisher 2003 pour créer un site Web, et ça marche très bien.
J'ai trouvé comment utiliser mouseover et mouseout pour faire changer l'image au passage de la souris.
MAIS les 2 images sont au même endroit !
Comment faire apparaître une image "ailleurs sur la page" au survol d'une autre ?
Merci !
positions d'images
14 messages • Page 1 sur 1
Re: positions d'images
de metroman le 29 Oct 2008, 20:33
cherche rollover éloigné sue http://www.editeurjavascript.com
- metroman
- Funny Plug'z
- Messages: 176
- Inscription: 24 Juin 2008, 18:31
- Localisation: Chez moi!
- Points: 87
Re: positions d'images
de jopa16 le 29 Oct 2008, 23:38
Merci, Metroman pour ta réponse rapide !
J'ai trouvé.
Il ne me reste plus qu'Ã mettre en application !
Encore merci !
J'ai trouvé.
Il ne me reste plus qu'Ã mettre en application !
Encore merci !
Re: positions d'images
de metroman le 29 Oct 2008, 23:42
Derien!
Il me semble que c'est ce script que MSG utilise pour le menu horizontal en haut.
Il me semble que c'est ce script que MSG utilise pour le menu horizontal en haut.
- metroman
- Funny Plug'z
- Messages: 176
- Inscription: 24 Juin 2008, 18:31
- Localisation: Chez moi!
- Points: 87
Re: positions d'images
de zardoz le 30 Oct 2008, 00:18
Une façon différente : Un script javaScript basé sur les Classes CSS.
getElementById( ' ID de la cible ' ).className = ' leNomDeLaClasse ';
Position avant de cliquer :
Position après avoir cliquer :
Un script très simple à écrire et comprendre.
Évidemment les valeurs sont variables donc ajustable au niveau des classes CSS.
Simple mais çà marche. ++
getElementById( ' ID de la cible ' ).className = ' leNomDeLaClasse ';
- Code: Tout sélectionner
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Position</title>
<style type='text/css'>
body
{
margin-left:auto;
margin-right:auto;
margin-top:10px;
width:800px;
height:370px;
}
.base
{
background:white;
border:solid thin gray;
width:580px;
height:300px;
padding:5px;
cursor:auto;
}
.imbrication
{
background:url('images/iapetus01.jpg');
background-repeat:no-repeat;
border:solid thin #B39648;
width:100px; height:100px;
cursor:hand;
}
.position
{
background:url('images/iapetus01.jpg');
background-repeat:no-repeat;
margin-left:200px;
border:solid thin #B39648;
width:376px;
height:295px;
cursor:hand;
}
</style>
<script type='text/javaScript'>
function position()
{
if (document.getElementById("divImage").className == "imbrication")
{
document.getElementById("divImage").className = "position";
}
else if (document.getElementById("divImage").className == "position")
{
document.getElementById("divImage").className = "imbrication";
}
}
</script>
</head>
<body>
<div class="base">
<div id="divImage" class="imbrication" onClick="position()"></div>
</div>
</body>
</html>
Position avant de cliquer :
Position après avoir cliquer :
Un script très simple à écrire et comprendre.
Évidemment les valeurs sont variables donc ajustable au niveau des classes CSS.
Simple mais çà marche. ++
Dernière édition par zardoz le 30 Oct 2008, 18:35, édité 4 fois.
Re: positions d'images
de Black le 30 Oct 2008, 00:46
Magnifique Zardoz o/ Mais tu sais pas aérer ton code ? 
- Black
- Plug'zien Pro
- Messages: 1233
- Inscription: 08 Déc 2007, 21:34
- Localisation: Cherbourg, France.
- Points: 856
Re: positions d'images
de zardoz le 30 Oct 2008, 01:28
Black a écrit:Magnifique Zardoz o/ Mais tu sais pas aérer ton code ?
C'est vrai que j'aurais pu offrir mieux : C'est fait vite :
Je vais l'aérer là .
++
PS : C'est fait.
Re: positions d'images
de Black le 30 Oct 2008, 12:59
C'est déjà mieux, mais tu sais on peut aussi indenter le CSS 
- Black
- Plug'zien Pro
- Messages: 1233
- Inscription: 08 Déc 2007, 21:34
- Localisation: Cherbourg, France.
- Points: 856
Re: positions d'images
de jopa16 le 30 Oct 2008, 13:58
Encore merci à tous !
Me voilà de quoi bosser pour voir comment ça marche, ce que ça signifie, tous ces codes que je ne connais pas encore et pour voir comment m'en servir !
Mais ... z'inquiétez pas ! j'ai acheté un tube d'aspirine !!!
et puis, c'est comme ça qu'on apprend, non ?
Merci !
Me voilà de quoi bosser pour voir comment ça marche, ce que ça signifie, tous ces codes que je ne connais pas encore et pour voir comment m'en servir !
Mais ... z'inquiétez pas ! j'ai acheté un tube d'aspirine !!!
et puis, c'est comme ça qu'on apprend, non ?
Merci !
Re: positions d'images
de zardoz le 30 Oct 2008, 18:27
Black a écrit:C'est déjà mieux, mais tu sais on peut aussi indenter le CSS
C'est vraiment une bonne idée çà :
: J'assume imédiatement. : @+PS : Eh bien voilà c'est fait : ++
---> jopa16 : Au début ne joue qu'avec les valeurs des 2 classes CSS : Comme un jeu.
---> Les 2 classes sont .imbrication et .position : Il y aura à chacun des changements,
---> des réactions différentes et immédiates. La compréhension viendra avec le temps.
---> Tu peux très avoir un thumbnail comme image à .imbrication et l'image en taille réelle
---> Ã la classe .position par exemple : Chacun ayant son backgroud-image, son adresse.
Re: positions d'images
de jopa16 le 31 Oct 2008, 19:12
Merci encore !
Je n'ai pas encore tout pigé, mais ça avance ! Le tâtonnement, bonne méthode !
Mais... un autre petit problème, toujours dans le même domaine :
j'ai une image, disons "image1.jpg".
Au survol de la souris, elle est remplacée par "image2.jpg". Pas de pb.
Et là , j'aimerais que image2.jpg soit cliquable, devienne un lien pour afficher une autre page.
Je fais comment ?
Merci !
Je n'ai pas encore tout pigé, mais ça avance ! Le tâtonnement, bonne méthode !
Mais... un autre petit problème, toujours dans le même domaine :
j'ai une image, disons "image1.jpg".
Au survol de la souris, elle est remplacée par "image2.jpg". Pas de pb.
Et là , j'aimerais que image2.jpg soit cliquable, devienne un lien pour afficher une autre page.
Je fais comment ?
Merci !
Re: positions d'images
de jopa16 le 31 Oct 2008, 19:17
complément à mon message :
j'aurais dû préciser que, travaillant avec Publisher2003, j'insère le code suivant
<img border="1"
src="image1.jpg"
onmouseover = 'src = "image2.jpg"'
onmouseout = 'src = "image1.jpg"'>
à l'endroit où doivent s'afficher les images. Les images sont dans le même répertoure que le fichier html.
Merci...
j'aurais dû préciser que, travaillant avec Publisher2003, j'insère le code suivant
<img border="1"
src="image1.jpg"
onmouseover = 'src = "image2.jpg"'
onmouseout = 'src = "image1.jpg"'>
à l'endroit où doivent s'afficher les images. Les images sont dans le même répertoure que le fichier html.
Merci...
Re: positions d'images
de zardoz le 31 Oct 2008, 23:31
Moi personnellement j'irais plus avec une fonction JavaScript.
Si j'ai le temps aujourd'hui je te ferai une démo : ++
Si j'ai le temps aujourd'hui je te ferai une démo : ++
Re: positions d'images
de jopa16 le 01 Nov 2008, 09:42
Merci, Zardoz !
C'est sympa... mais y a pas l'feu !!!
C'est sympa... mais y a pas l'feu !!!
14 messages • Page 1 sur 1
Retourner vers Vos questions en Webdesign
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités
- Index du forum
- L'équipe du forum • Supprimer les cookies du forum • Heures au format UTC + 1 heure
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
phpBB-fr.com & phpBB.biz
Design & administration by Cclleemm
Design & administration by Cclleemm