Geckozone

Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
https://forums.mozfr.org/

rollover ou popup ?

https://forums.mozfr.org/viewtopic.php?t=85073

Page 1 sur 1

rollover ou popup ?

Publié : 21 juil. 2010, 12:32
par vincent3m
Bonjour, j'arrive à faire des "rollover" mais je me trouve limité par la taille de l'image qui apparait au passage de la souris qui doit être aux mêmes dimensions que l'image "on mouse out". J'aimerais qu'une image plus grande recouvre la première. Comment faire ? (Est-ce encore du rollover ?)
Merci

Re: rollover ou popup ?

Publié : 21 juil. 2010, 13:27
par chinon37
Bonjour,
Peut on avoir le code de la page?
As-tu 2 images différentes?
ou
une suele image dont la taille est réduite par css sur la page html?

Re: rollover ou popup ?

Publié : 21 juil. 2010, 14:24
par vincent3m
Voici le code tel qu'il est avec les images de même taille :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title>site de Vincent Mérand</title>
  <meta
 content="ornithologie, digiscopie, randonnées, GR10, GR5, GR 20, romans de Vincent Mérand."
 name="description">
  <meta
 content="photos, art, romans de V. MERAND, ornithologie, littérature"
 name="keywords">
  <style type="text/css"></style>
</head>
<body
 style="color: rgb(255, 255, 204); background-color: rgb(255, 255, 255); background-image: url(images/imagesnouvelindex/000075fonce.jpg);"
 alink="#cc0000" link="#ffffcc" vlink="white">
<big style="font-weight: bold;"><span
 style="font-family: Century Gothic; color: rgb(240, 91, 18);">
</span></big>
<div style="text-align: center;">
<h3><big
 style="font-weight: bold; font-family: Comic Sans MS; color: rgb(204, 0, 0);">Bonjour
et&nbsp;</big><span
 style="font-family: Comic Sans MS; color: rgb(204, 0, 0);"></span><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"><span
 style="color: rgb(153, 51, 0);"><span
 style="color: rgb(204, 0, 0);">bienvenue sur le site
de&nbsp;</span></span></span></big></h3>
<h3><big style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"><span
 style="color: rgb(153, 51, 0);"><span
 style="color: rgb(204, 0, 0);">Vincent Mérand</span>&nbsp;<big>
&nbsp;&nbsp;</big></span></span></big></h3>
</div>
<div style="text-align: center;"><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><img
 style="width: 116px; height: 23px;" alt=""
 src="images/welcome.gif"> <big
 style="font-weight: bold; font-family: Comic Sans MS;"><img
 style="width: 130px; height: 27px;" alt=""
 src="images/texte_mis_a_jour_002.gif"> <span
 style="color: rgb(255, 255, 204);">le 20/07/2010</span>
</big><br>
<br>
</div>
<div style="text-align: center;"><big
 style="font-weight: bold; font-family: Comic Sans MS;"><br>
</big>
<div style="text-align: center;"><img
 style="border: 4px ridge rgb(255, 255, 204); width: 150px; height: 150px;"
 src="images/imagesnouvelindex/boutonornitho.jpg"
 alt="description de l'image"
 onmouseover="this.src='images/imagesnouvelindex/boutonornitho2.jpg';"
 onmouseout="this.src='images/imagesnouvelindex/boutonornitho.jpg';">&nbsp;&nbsp;
&nbsp;
<img style="border: 4px ridge rgb(204, 102, 0);"
 src="images/imagesnouvelindex/boutonphoto.jpg"
 alt="description de l'image"
 onmouseover="this.src='images/imagesnouvelindex/boutonphoto2.jpg';"
 onmouseout="this.src='images/imagesnouvelindex/boutonphoto.jpg';">&nbsp;
&nbsp;<img style="border: 4px ridge rgb(255, 204, 102);"
 src="images/imagesnouvelindex/boutonmontagne.jpg"
 alt="description de l'image"
 onmouseover="this.src='images/imagesnouvelindex/boutonmontagne2.jpg';"
 onmouseout="this.src='images/imagesnouvelindex/boutonmontagne.jpg';">
&nbsp; &nbsp;<img
 style="border: 4px ridge rgb(255, 204, 51); width: 150px; height: 150px;"
 src="images/imagesnouvelindex/boutonroman.jpg"
 alt="description de l'image"
 onmouseover="this.src='images/imagesnouvelindex/boutonroman2.jpg';"
 onmouseout="this.src='images/imagesnouvelindex/boutonroman.jpg';">&nbsp;
&nbsp;
<img
 style="border: 4px ridge rgb(255, 204, 0); width: 150px; height: 150px;"
 src="images/imagesnouvelindex/boutonmusik.jpg"
 alt="description de l'image"
 onmouseover="this.src='images/imagesnouvelindex/boutonmusik2.jpg';"
 onmouseout="this.src='images/imagesnouvelindex/boutonmusik.jpg';">&nbsp;
&nbsp;<img
 style="border: 4px ridge yellow; width: 150px; height: 150px; color: black;"
 src="images/imagesnouvelindex/boutonvoyage.jpg"
 alt="description de l'image"
 onmouseover="this.src='images/imagesnouvelindex/boutonvoyage2.jpg';"
 onmouseout="this.src='images/imagesnouvelindex/boutonvoyage.jpg';">
&nbsp;
&nbsp;
<big style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"><span
 style="color: rgb(0, 0, 153);"></span></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"><span
 style="color: rgb(0, 0, 153);"></span></span></big><a
 target="_blank" href="file:///C:/mon%20site/perso.html#randos"><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big></a><big
 style="color: rgb(0, 0, 153); font-family: Comic Sans MS;"><span
 style="font-weight: bold; color: rgb(237, 89, 17);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big>
<div style="text-align: center;"><span
 style="color: rgb(153, 0, 0);"></span><span
 style="color: rgb(153, 0, 0);"></span><big
 style="font-weight: bold; font-family: Comic Sans MS;"><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);"></span></big><span
 style="color: rgb(153, 0, 0);"><span
 style="color: rgb(255, 255, 204);">pour
m'écrire, merci de recopier mon adresse </span><img
 style="width: 62px; height: 68px;" alt=""
 src="images/mail90.gif"></span><span
 style="color: rgb(153, 0, 0);"></span><span
 style="color: rgb(153, 0, 0);">&nbsp;</span><big
 style="color: rgb(204, 0, 0); font-family: Comic Sans MS;"><big
 style="color: rgb(255, 0, 0);"><big><span
 style="font-weight: bold;"><span
 style="font-family: French Script MT;"></span></span></big></big></big><span
 style="color: rgb(153, 0, 0);">&nbsp; <br>
<img src="images/adresse08.jpg" alt=""
 style="border: 2px solid rgb(255, 255, 153); width: 259px; height: 68px;">&nbsp;
&nbsp;</span><span style="color: rgb(153, 0, 0);"></span>
</big></div>
<big style="font-weight: bold; font-family: Comic Sans MS;"><big
 style="font-weight: bold; font-family: Comic Sans MS;"><span
 style="color: rgb(240, 91, 18);">
</span></big><big style="font-weight: bold;"><span
 style="text-decoration: underline;"></span></big></big>
<div style="text-align: center;"><big
 style="font-weight: bold; font-family: Comic Sans MS;"><a
 style="color: rgb(153, 0, 0);"><span
 style="color: rgb(153, 0, 0);"><br>

Re: rollover ou popup ?

Publié : 21 juil. 2010, 19:40
par vincent3m
Bonsoir
après pas mal d'essais, j'ai fait sauter tous les "width: 150px; height: 150px; color: black;" et je peux maintenant mettre des photos plus grandes qui apparaissent bien "on mouse over" à la place des plus petites "on mouse out". C'est bon ! Mais je suis preneur de conseils sur les CSS si une autre solution passe par là car je ne m'en sers pas du tout (je ne comprends rien au CSS sur Kompozer ! :roll: )

Re: rollover ou popup ?

Publié : 22 juil. 2010, 10:27
par Ymai
Bonjour
Je ne crois pas que CSS soit la solution au problème posé. J'irais plutôt voir du côté de Javascript et des bibliothèques existantes (type jQuery,...).
Pour les feuilles de styles avec KpZ, tout est là: http://josar.free.fr/tutoKompozer/feuilleStylePlan.html#

Re: rollover ou popup ?

Publié : 23 juil. 2010, 15:25
par vincent3m
OK merci
Fuseau horaire sur UTC+02:00
Page 1 sur 1

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru