Annonce superposée

Guy

28/03/2006 à 18:35

Guy wrote:

Bonjour,
comment fait-on ces info-bulles superposées qui reste 5 à
10s par dessus la page, le temps de lire une annonce à
propos du site ? (en fait, que du texte, ça me va !)

Bjr,

il vous faut connaître au moins :

la méthode window.open (et close )
l'évenement onmouseover
les méthode setTimeout et clearTimeout

Bonne chance

==> Sympa, mais ça m'étonnerait que ça soit une question de
chance!(;o))

Je ne parlais pas de fenêtre popup.
Plutôt de div vue/cachée ou à la limite de Flash dans un
layer...

Merci pour cette tentative d'aide !(;o))))))

Voici un exemple, sans temporisations, avec comme événement déclencheur
le survol de la souris !
même avec de la malchance, vous adapterez facilement!

G

<html>
<head>
<title>Carte de voeux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.PSTY {background-color:#ffff99; position:absolute; visibility:hidden;
border:#cccc00 5px solid;
font: 18px Arial, Verdana }
</style>

<script type="text/javascript" language="javascript">

function PUP (evt, CElem) {
if (document.all) {
document.getElementById(CElem).style.top = parseInt(evt.y)+2 ;
document.getElementById(CElem).style.left = Math.max(2,parseInt(evt.x)-125);
}
else {
document.getElementById(CElem).style.top = parseInt(evt.pageY)+2 + "px";
document.getElementById(CElem).style.left =
Math.max(2,parseInt(evt.pageX)-125) +"px" ;
}
document.getElementById(CElem).style.visibility = "visible" ;
}
function PDW ( CElem) {

document.getElementById(CElem).style.visibility = "hidden" ;
}
function ChgLib() {
if (document.CC.select.value == "D") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="Des Logiciels fiables";
document.getElementById('boule3').innerHTML="Des serveurs robustes et
puissants";
document.getElementById('boule4').innerHTML="Des applications";
document.getElementById('boule5').innerHTML="Des virus bénins, distrayants";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
if (document.CC.select.value == "A") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="";
document.getElementById('boule3').innerHTML="";
document.getElementById('boule4').innerHTML="";
document.getElementById('boule5').innerHTML="";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
if (document.CC.select.value == "C") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="";
document.getElementById('boule3').innerHTML="";
document.getElementById('boule4').innerHTML="";
document.getElementById('boule5').innerHTML="";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
}

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" background="WHITEMAR.png">
<MAP name="boules">
<AREA shape="circle" coords="235,64,25" href="#"
onMouseover="PUP(event,'boule1')" onMouseout="PDW ('boule1')">
<AREA shape="circle" coords="230,170,23" href="#"
onMouseover="PUP(event,'boule2')" onMouseout="PDW ('boule2')">
<AREA shape="circle" coords="210,245,23" href="#"
onMouseover="PUP(event,'boule3')" onMouseout="PDW ('boule3')">
<AREA shape="circle" coords="260,278,23" href="#"
onMouseover="PUP(event,'boule4')" onMouseout="PDW ('boule4')">
<AREA shape="circle" coords="177,325,23" href="#"
onMouseover="PUP(event,'boule5')" onMouseout="PDW ('boule5')">
<AREA shape="circle" coords="265,345,23" href="#"
onMouseover="PUP(event,'boule6')" onMouseout="PDW ('boule6')">
</map>
<span class="PSTY" ID="boule1">Meilleurs Voeux</span>
<span class="PSTY" ID="boule2">Bonne Année</span>
<span class="PSTY" ID="boule3">pour 2004</span>
<span class="PSTY" ID="boule4">Meilleurs Voeux<br>et Bonne année</span>
<span class="PSTY" ID="boule5">pour toute votre équipe</span>
<span class="PSTY" ID="boule6">Meilleurs Voeux 2004</span>
<center><form name="CC" method="post" action="">
<b><font face="Verdana, Arial, Helvetica, sans-serif"
size="2">Voeux pour
:</font></b>
<select name="select" onChange="javascript:ChgLib()">
<option value="X" selected>........
<option value="D">Le directeur informatique
<option value="A">les amis

<option value="C">Les collègues

</select>
</form>
<img src="ArbreNoel2.jpg" usemap="#boules" border=0 >
</center>
</body>
</html>

Guy wrote:

Bonjour,
comment fait-on ces info-bulles superposées qui reste 5 à
10s par dessus la page, le temps de lire une annonce à
propos du site ? (en fait, que du texte, ça me va !)

Bjr,

il vous faut connaître au moins :

la méthode window.open (et close )
l'évenement onmouseover
les méthode setTimeout et clearTimeout

Bonne chance

==> Sympa, mais ça m'étonnerait que ça soit une question de
chance!(;o))

Je ne parlais pas de fenêtre popup.
Plutôt de div vue/cachée ou à la limite de Flash dans un
layer...

Merci pour cette tentative d'aide !(;o))))))

Voici un exemple, sans temporisations, avec comme événement déclencheur
le survol de la souris !
même avec de la malchance, vous adapterez facilement!

G

<html>
<head>
<title>Carte de voeux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.PSTY {background-color:#ffff99; position:absolute; visibility:hidden;
border:#cccc00 5px solid;
font: 18px Arial, Verdana }
</style>

<script type="text/javascript" language="javascript">

function PUP (evt, CElem) {
if (document.all) {
document.getElementById(CElem).style.top = parseInt(evt.y)+2 ;
document.getElementById(CElem).style.left = Math.max(2,parseInt(evt.x)-125);
}
else {
document.getElementById(CElem).style.top = parseInt(evt.pageY)+2 + "px";
document.getElementById(CElem).style.left =
Math.max(2,parseInt(evt.pageX)-125) +"px" ;
}
document.getElementById(CElem).style.visibility = "visible" ;
}
function PDW ( CElem) {

document.getElementById(CElem).style.visibility = "hidden" ;
}
function ChgLib() {
if (document.CC.select.value == "D") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="Des Logiciels fiables";
document.getElementById('boule3').innerHTML="Des serveurs robustes et
puissants";
document.getElementById('boule4').innerHTML="Des applications";
document.getElementById('boule5').innerHTML="Des virus bénins, distrayants";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
if (document.CC.select.value == "A") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="";
document.getElementById('boule3').innerHTML="";
document.getElementById('boule4').innerHTML="";
document.getElementById('boule5').innerHTML="";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
if (document.CC.select.value == "C") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="";
document.getElementById('boule3').innerHTML="";
document.getElementById('boule4').innerHTML="";
document.getElementById('boule5').innerHTML="";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
}

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" background="WHITEMAR.png">
<MAP name="boules">
<AREA shape="circle" coords="235,64,25" href="#"
onMouseover="PUP(event,'boule1')" onMouseout="PDW ('boule1')">
<AREA shape="circle" coords="230,170,23" href="#"
onMouseover="PUP(event,'boule2')" onMouseout="PDW ('boule2')">
<AREA shape="circle" coords="210,245,23" href="#"
onMouseover="PUP(event,'boule3')" onMouseout="PDW ('boule3')">
<AREA shape="circle" coords="260,278,23" href="#"
onMouseover="PUP(event,'boule4')" onMouseout="PDW ('boule4')">
<AREA shape="circle" coords="177,325,23" href="#"
onMouseover="PUP(event,'boule5')" onMouseout="PDW ('boule5')">
<AREA shape="circle" coords="265,345,23" href="#"
onMouseover="PUP(event,'boule6')" onMouseout="PDW ('boule6')">
</map>
<span class="PSTY" ID="boule1">Meilleurs Voeux</span>
<span class="PSTY" ID="boule2">Bonne Année</span>
<span class="PSTY" ID="boule3">pour 2004</span>
<span class="PSTY" ID="boule4">Meilleurs Voeux<br>et Bonne année</span>
<span class="PSTY" ID="boule5">pour toute votre équipe</span>
<span class="PSTY" ID="boule6">Meilleurs Voeux 2004</span>
<center><form name="CC" method="post" action="">
<b><font face="Verdana, Arial, Helvetica, sans-serif"
size="2">Voeux pour
:</font></b>
<select name="select" onChange="javascript:ChgLib()">
<option value="X" selected>........
<option value="D">Le directeur informatique
<option value="A">les amis

<option value="C">Les collègues

</select>
</form>
<img src="ArbreNoel2.jpg" usemap="#boules" border=0 >
</center>
</body>
</html>

Vous avez filtré cet utilisateur ! Consultez son message

Guy wrote:

Bonjour,
comment fait-on ces info-bulles superposées qui reste 5 à
10s par dessus la page, le temps de lire une annonce à
propos du site ? (en fait, que du texte, ça me va !)

Bjr,

il vous faut connaître au moins :

la méthode window.open (et close )
l'évenement onmouseover
les méthode setTimeout et clearTimeout

Bonne chance

==> Sympa, mais ça m'étonnerait que ça soit une question de
chance!(;o))

Je ne parlais pas de fenêtre popup.
Plutôt de div vue/cachée ou à la limite de Flash dans un
layer...

Merci pour cette tentative d'aide !(;o))))))

Voici un exemple, sans temporisations, avec comme événement déclencheur
le survol de la souris !
même avec de la malchance, vous adapterez facilement!

G

<html>
<head>
<title>Carte de voeux</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.PSTY {background-color:#ffff99; position:absolute; visibility:hidden;
border:#cccc00 5px solid;
font: 18px Arial, Verdana }
</style>

<script type="text/javascript" language="javascript">

function PUP (evt, CElem) {
if (document.all) {
document.getElementById(CElem).style.top = parseInt(evt.y)+2 ;
document.getElementById(CElem).style.left = Math.max(2,parseInt(evt.x)-125);
}
else {
document.getElementById(CElem).style.top = parseInt(evt.pageY)+2 + "px";
document.getElementById(CElem).style.left =
Math.max(2,parseInt(evt.pageX)-125) +"px" ;
}
document.getElementById(CElem).style.visibility = "visible" ;
}
function PDW ( CElem) {

document.getElementById(CElem).style.visibility = "hidden" ;
}
function ChgLib() {
if (document.CC.select.value == "D") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="Des Logiciels fiables";
document.getElementById('boule3').innerHTML="Des serveurs robustes et
puissants";
document.getElementById('boule4').innerHTML="Des applications";
document.getElementById('boule5').innerHTML="Des virus bénins, distrayants";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
if (document.CC.select.value == "A") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="";
document.getElementById('boule3').innerHTML="";
document.getElementById('boule4').innerHTML="";
document.getElementById('boule5').innerHTML="";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
if (document.CC.select.value == "C") {
document.getElementById('boule1').innerHTML="Meilleurs Voeux";
document.getElementById('boule2').innerHTML="";
document.getElementById('boule3').innerHTML="";
document.getElementById('boule4').innerHTML="";
document.getElementById('boule5').innerHTML="";
document.getElementById('boule6').innerHTML="Bonne Année 2004";
}
}

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" background="WHITEMAR.png">
<MAP name="boules">
<AREA shape="circle" coords="235,64,25" href="#"
onMouseover="PUP(event,'boule1')" onMouseout="PDW ('boule1')">
<AREA shape="circle" coords="230,170,23" href="#"
onMouseover="PUP(event,'boule2')" onMouseout="PDW ('boule2')">
<AREA shape="circle" coords="210,245,23" href="#"
onMouseover="PUP(event,'boule3')" onMouseout="PDW ('boule3')">
<AREA shape="circle" coords="260,278,23" href="#"
onMouseover="PUP(event,'boule4')" onMouseout="PDW ('boule4')">
<AREA shape="circle" coords="177,325,23" href="#"
onMouseover="PUP(event,'boule5')" onMouseout="PDW ('boule5')">
<AREA shape="circle" coords="265,345,23" href="#"
onMouseover="PUP(event,'boule6')" onMouseout="PDW ('boule6')">
</map>
<span class="PSTY" ID="boule1">Meilleurs Voeux</span>
<span class="PSTY" ID="boule2">Bonne Année</span>
<span class="PSTY" ID="boule3">pour 2004</span>
<span class="PSTY" ID="boule4">Meilleurs Voeux<br>et Bonne année</span>
<span class="PSTY" ID="boule5">pour toute votre équipe</span>
<span class="PSTY" ID="boule6">Meilleurs Voeux 2004</span>
<center><form name="CC" method="post" action="">
<b><font face="Verdana, Arial, Helvetica, sans-serif"
size="2">Voeux pour
:</font></b>
<select name="select" onChange="javascript:ChgLib()">
<option value="X" selected>........
<option value="D">Le directeur informatique
<option value="A">les amis

<option value="C">Les collègues

</select>
</form>
<img src="ArbreNoel2.jpg" usemap="#boules" border=0 >
</center>
</body>
</html>

METIS

28/03/2006 à 21:08

Guy wrote:

Voici un exemple, sans temporisations, avec comme
événement déclencheur le survol de la souris !
même avec de la malchance, vous adapterez facilement!

==> Ah, cool.
Vais tenter de faire marcher ça !
Merci.

--
<|[;o)) METIS
http://www.graphM.com
Remplacer wawamoo par ce qu'il faut...

METIS

28/03/2006 à 21:08

ASM wrote:

Non, ça marche pas, le positionnement ne se produit pas,
tous les boutons sont les uns sur les autres en haut à
gauche.

<a id="Layer1"
style="display: block; /* c'est là k'é l'truc */
position: absolute;
left: 10px;
top: 111px;
width: 110px;
height: 20px;
z-index: 1
"
class="abi_on">Accueil</a>

==>OK merci, vais essayer !!

--
<|[;o)) METIS
http://www.graphM.com
Remplacer wawamoo par ce qu'il faut...

Annonce superposée

3 réponses

Veuillez sélectionner un problème