18073 sujets

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

Exercice assez difficile

Bonjour à tous, Smiley biggrin

je construis des pages pour un site intranet déjà existant. Un peu avec les mains liées car je ne peux pas tout modifier comme ça (je dis ça pour les css en "style", j'ai créé une page où au onMouseover sur un lien, une image est remplacée par une autre pour disparaitre au onMouseout.

au onClick, une video est lue dans une Iframe (oui je sais! Smiley fache , je ne peux faire autrement pour l'instant désolé).

Ce que j'aimerais c'est que lorsque la lecture d'une video a commencé, l'image correspondante à son lien reste comme si elle était encore comme onMouseover....
euh, j'suis clair là?

j'ai beau étudier le CSS et lire des articles du site je ne trouve pas de solution. Je pense que c'est tout de m^me possible de faire ça.
que dois-je faire? par où commencer?

voici le code, une capture d'écran et merci d'avance

milt

<div style="float:left; background-image:url('images/line.gif'); background-position:left; background-repeat:no-repeat; padding:0; margin:0;"><!--  border:1px dotted #CCCCCC; -->
<ul style="list-style-type:none; width:75px; padding:0; margin:0;">
<li style="margin-bottom:5px;"><img src="images/station00.png" name="i001" align="middle" border="0"></li>
<li style="margin-bottom:5px;"><img src="images/station00.png" name="i002" align="middle" border="0"></li>
.....
</ul>						
</div>

<div style="float:left; padding:0; margin:0;">			
<ul style="list-style-type:none; width:180px; padding:0; margin:0;">
<li style="margin:20px 0 48px 0;"><a href="seltrac-10.htm" target="frame" onMouseOver="i001.src='images/station02.png'" onMouseOut="i001.src='images/station00.png'" onLoad="i001.src='images/station02.png'" class="text-blue-bold">Seltrac S10</a></li>
<li style="margin:0 0 48px 0;"><a href="seltrac-20.htm" target="frame" onMouseOver="i002.src='images/station02.png'" onMouseOut="i002.src='images/station00.png'" onLoad="i001.src='images/station02.png'" class="text-blue-bold"><strong>Seltrac S20</strong></a></li>
</ul>						
</div>

<div style="float:left; width:350px; height:304px; padding:0; margin:0;">
<iframe scrolling="auto" name="frame" frameborder="0" width="350" height="304" style="border:1px dotted #CCCCCC; padding:0; margin:20px 0 0 0;"></iframe></div>
upload/720-test.jpg
Modifié par miltonis (30 Jan 2006 - 15:38)
je me réponds tout seul pour poser une question supplémentaire:
est-ce que dans ce cas, je peux remplacer le <iframe> par un <div>?
Salut,

Perso, j'initialiserais une variable correspondant à l'action onClick( ex var clicksouris=0;). Si clicksouris=0 -> changer d'image lors d'un onMouseout. Si clicksouris=1 -> ne rien changer.
a écrit :
je me réponds tout seul pour poser une question supplémentaire:
est-ce que dans ce cas, je peux remplacer le <iframe> par un <div>?


Oui, en se servant du DOM ça devrait être faisable.
ilhooq a écrit :
Salut,

Perso, j'initialiserais une variable correspondant à l'action onClick( ex var clicksouris=0;). Si clicksouris=0 -> changer d'image lors d'un onMouseout. Si clicksouris=1 -> ne rien changer.


merci de tes réponses ilhooq,
tu veux dire par là que je devrais utiliser javascript?
miltonis a écrit :

tu veux dire par là que je devrais utiliser javascript?


Si je peux me permettre : de toute façon tu le fais déjà Smiley smile
Bon ben voila!
enfin j'ai réussi (avec l'aide d'un gentil javascripteur) à faire ce que je voulais. Comme promis, voici le résultat :

<script language="javascript">
var videoActif = null;
var imageOver = new Image();
imageOver.src = "images/station02.png";
var imageOut = new Image();
imageOut.src = "images/station00.png";
var prefixImage = "i00";

function switchImage(imageNo) {
var image = document.images[prefixImage + imageNo];
if (image == videoActif)
  return;
if (image.src == imageOver.src)
  image.src = imageOut.src;
else 
  image.src = imageOver.src;
}

function selectVideo(imageNo) {
var video = document.images[prefixImage + imageNo];
if (videoActif && video != videoActif)
  videoActif.src = imageOut.src;
videoActif = video;
}
</script>

<div style="float:left; background-image:url('images/line.gif'); background-position:left; background-repeat:no-repeat; padding:0; margin:0;">
<ul style="list-style-type:none; width:75px; padding:0; margin:0;">
<li style="margin-bottom:5px;"><img src="images/station00.png" name="i001" align="middle" border="0"></li>
</ul> 
</div>
					
<div style="float:left; padding:0; margin:0;"> 
<ul style="list-style-type:none; width:180px; padding:0; margin:0;">
<li style="margin:20px 0 48px 0;"><a href="seltrac-10.htm" target="frame" onMouseOver="switchImage(1)" onMouseOut="switchImage(1)" onclick="selectVideo(1)" class="text-blue-bold">Seltrac S10</a></li>
</ul> 
</div>
					
<div style="float:left; width:350px; height:304px; padding:0; margin:0;"><iframe scrolling="auto" name="frame" frameborder="0" width="350" height="304" style="border:1px dotted #CCCCCC; padding:0; margin:20px 0 0 0;"></iframe></div>


je sais, du coup ça n'a rien à voir avec le CSS mais bon, j'éatis lancé.... Smiley langue

pour rappel, l'objet de ce script est d'activer l'affichage d'une image TANT QUE une video est lue.

a++
Sujet clos
Aller à