18008 sujets

Questions générales et questions de débutants

[Résolu] Survole image et texte

bonjour
je voudrais savoir comment faire pour faire pour changer une images avec un survole de la souris sur une texte et une image .
j'ai essayé 2 façons mais cela ne fonctionne pas bien la première façon l'image ce change mai des que je passe sur le texte rien ne se passe et la deuxième façon les images ne s'affiche pas.
voici mes tests :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script language="JavaScript">
$image01="image site/fond rouge 01.jpg"
$image02="image site/fond gris 01.jpg"
$image03="url(image site/fond rouge 01.jpg) no-repeat"
$image04="url(image site/fond gris 01.jpg) no-repeat"
$texte01="chapitre 1"
$texte02="chapitre 2"
$lien01="chapitre 1.html"
$lien02="chapitre 2.html"
$position001_01="absolute"
$position001_02="0px"
$position001_03="0px"
$position001_04="240px"
$position001_05="48px"
$position002_01="absolute"
$position002_02="0px"
$position002_03="192px"
$position002_04="240px"
$position002_05="48px"

function charge() {
// selection 1 //
document.getElementById("tableau001-01").href=$lien01;
document.getElementById("tableau001-03").innerHTML=$texte01;
document.getElementById("tableau001-02").style.position=$position001_01;
document.getElementById("tableau001-02").style.left=$position001_02;
document.getElementById("tableau001-02").style.top=$position001_03;
document.getElementById("tableau001-02").style.width=$position001_04;
document.getElementById("tableau001-02").style.height=$position001_05;
document.getElementById("tableau001-04").onmouseover=function(){this.src=$image01};
document.getElementById("tableau001-04").onmouseout=function(){this.src=$image02};
document.getElementById("tableau001-04").src=$image02;

// selection 2 //
document.getElementById("tableau002-01").href=$lien02;
document.getElementById("tableau002-03").innerHTML=$texte01;
document.getElementById("tableau002-02").style.background=$image04;
document.getElementById("tableau002-02").style.position=$position002_01;
document.getElementById("tableau002-02").style.left=$position002_02;
document.getElementById("tableau002-02").style.top=$position002_03;
document.getElementById("tableau002-02").style.width=$position002_04;
document.getElementById("tableau002-02").style.height=$position002_05;
document.getElementById("tableau002-02").onmouseover=function(){document.getElementById("tableau002-02").style.background=$image03;};
document.getElementById("tableau002-02").onmouseout=function(){document.getElementById("tableau002-02").style.background=$image04;};
};

</script>

<style type="text/css">
<!--
body {margin: 0px; padding: 0px;}
.Normal-P1 {margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400;font-family:"arial"; font-weight:700; font-size:30.0px; line-height:1em;}
/*Page StyleSheet*/
-->

</style>

</head>

<a id="tableau001-01" target="_top" style="color:#000000; text-decoration:none">
<div id="tableau001-02" ><img id="tableau001-04" style="position:absolute; left:0px; top:0px width:240px; height:48px">
<div id="tableau001-03" class="Normal-p1" style="position:absolute; left:5px; top:8px; width:230px; height:40px;"></div>
</div>
</a>

<a id="tableau002-01" target="_top" style="color:#000000; text-decoration:none">
<div id="tableau002-02">
<div id="tableau002-03" class="Normal-p1" style="position:absolute; left:5px; top:8px; width:230px; height:40px;"></div>
</div>
</a>

<BODY onload="charge()" >

</html>
je veut passer de l'image 1 a l'image 2 en survolant l'image 1 avec un texte dessus, car avec la sélection 1 de mon code lorsque je survole le texte l'image 2 ne reste pas.
j'ai réussi a trouvé la soluce avec la sélection 1 il faut mètre dans la balise <a onmouseover="charge('tableau001-04','1')"; onmouseout="charge('tableau001-04','2')">

et de crée cette fonction :
function charge(idtableau,image0001) {
if (image0001==1) {image0002=$image01}
if (image0001==2) {image0002=$image02}
document.getElementById(idtableau).src=image0002;
}
voila le survole ce passe bien il réagie en passant sur l'image et le texte
voici mon code entier :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style type="text/css">
<!--
body {margin: 0px; padding: 0px;}
.Normal-P1 {margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400;font-family:"arial"; font-weight:700; font-size:30.0px; line-height:1em;}
/*Page StyleSheet*/
-->

</style>

</head>
<body>
<a id="tableau001-01" target="_top" style="color:#000000; text-decoration:none" onmouseover="charge('tableau001-04','1')"; onmouseout="charge('tableau001-04','2')">
<div id="tableau001-02" ><img id="tableau001-04" style="position:absolute; left:0px; top:0px width:240px; height:48px">
<p id="tableau001-03" class="Normal-p1" style="position:absolute; left:5px; top:8px; width:230px; height:40px;"></p>
</div>
</a>
</BODY >

<script language="JavaScript">
$image01="image site/fond rouge 01.jpg"
$image02="image site/fond gris 01.jpg"
$texte01="chapitre 1"
$lien01="chapitre 1.html"
$position001_01="absolute"
$position001_02="0px"
$position001_03="0px"
$position001_04="240px"
$position001_05="48px"


function charge(idtableau,image0001) {
if (image0001==1) {image0002=$image01}
if (image0001==2) {image0002=$image02}
document.getElementById(idtableau).src=image0002;
}
// selection 1 //
document.getElementById("tableau001-01").href=$lien01;
document.getElementById("tableau001-03").innerHTML=$texte01;
document.getElementById("tableau001-02").style.position=$position001_01;
document.getElementById("tableau001-02").style.left=$position001_02;
document.getElementById("tableau001-02").style.top=$position001_03;
document.getElementById("tableau001-02").style.width=$position001_04;
document.getElementById("tableau001-02").style.height=$position001_05;
document.getElementById("tableau001-04").src=$image02;
</script>

</html>
Salut c'est tous a fait ca que je souhaiter faire mai dans la vidéo il n'y a pas code pour créer ce survole, merci quand même. J'ai réussie a créer depuis un code qui fonctionne bien le voila pour les personne intéresser :

<!DOCTYPE html >
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<style type="text/css">
body {background-color: Gainsboro;}

.class1 {background: url(image_site/fond04.jpg);text-align:center;font-family:"Times New Roman", serif;font-size:16.0px;line-height:1em;}
.class1:hover {background: url(image_site/fond06.jpg);}
.class1:active {background: url(image_site/fond05.jpg);}
</style>
</head>
<body >
<form id="bouton" name="bouton" method="post" action="#">
<div style="position:absolute; left:0px; top: 0px;width:200px; height:40px;"><input class="class1" style="position:absolute; width:200px; height:40px;" type="submit" name="affiche" value="Accueil" ></div>
</form>
</body>
</html>
Sujet clos
Aller à