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
rollover ou popup ?
Modérateur : chinon37
rollover ou popup ?
cordialement
Re: rollover ou popup ?
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?
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?
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Re: rollover ou popup ?
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 </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 </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> <big>
</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';">
<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';">
<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';">
<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';">
<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';">
<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';">
<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);"> </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);"> <br>
<img src="images/adresse08.jpg" alt=""
style="border: 2px solid rgb(255, 255, 153); width: 259px; height: 68px;">
</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>cordialement
Re: rollover ou popup ?
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 !
)
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 !
)cordialement
Re: rollover ou popup ?
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#
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#
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités