Rollover en javascript
Bonjour,
j'aimerais effectuer un rollover sur une phrase qui afficherait une image.
Je sais que c'est possible d'une image à l'autre mais est-ce possible d'une phrase à une image ???
Merci d'avance !!!
j'aimerais effectuer un rollover sur une phrase qui afficherait une image.
Je sais que c'est possible d'une image à l'autre mais est-ce possible d'une phrase à une image ???
Merci d'avance !!!
4 réponses
-
ce serait un peu long? en fait j'ai pas bien fait mias c'est l'idée
heu faut rjouter l'image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="Layer2" name="souris" style="position:absolute; left:8px; top:49px; width:121px; height:123px; z-index:2; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer1','','show')" onpropertychange="MM_showHideLayers('Layer1','','hide')"><img src="souris2.gif" width="120" height="120"></div>
<div id="Layer1" name="texte"style="position:absolute; left:10px; top:67px; width:105px; height:25px; z-index:1" onMouseOver="MM_showHideLayers('Layer2','','show')">mon
texte</div>
</body>
</html>-
-
@mokobe06j'ai plus simple
désolé hier j'étais pas en forme
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!--
function leclick()
{
document.getElementById('layer2').style.visibility = "visible";
document.getElementById('layer1').style.visibility = "hidden";
return false;
}
function lede()
{
document.getElementById('layer2').style.visibility = "hidden";
document.getElementById('layer1').style.visibility = "visible";
return false;
}
</script>
<body>
<div id="Layer1" style="position:absolute; left:88px; top:42px; width:138px; height:112px; z-index:1; background-color: #99FF00; layer-background-color: #99FF00; border: 1px none #000000;" onMouseOver="javascript:leclick()">ceci
est le texte</div>
<div id="Layer2" name="rg" style="position:absolute; left:88px; top:44px; width:141px; height:111px; z-index:2; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000; visibility: hidden;" onMouseOut="javascript:lede()">ceci
est l'image</div>
</body>
</html> -
@gatorJe te remercie encore beaucoup mais y a quelque chose que je ne comprends pas... Je dois faire où ma déclaration de l'image et je l'affiche comment car si je comprends bien dans ton exemple c'est juste une zone de texte....
Je te remercie beaucoup et suis désolé d'autant t'embeter...
-
-
tu fait un calque atribut visible= false au suvol de ton texte tu change à visible=true pas oublier de remettre visible à false à la sortie du survol de l'image
-
tu places <img src="xxx.xxx">à la place de ceci est l'image
(div id layer2) -
Je te remercie vraiment énormément !!! Ca marche nikel !!!
Encore merci !!!
