18041 sujets

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

OnFocus sur une image ?

Bonjour,

Voila je developpe en ce moment une interface destinée à etre utilisée sur une Set Top Box, qui utilise le navigateur "Freco", TRES limité :'(

Il ne tolere que le HTML 4.0 et le javaScript 1.3 ...

Histoire d'ajouter un peu de vie au portail, je voudrais animer l'image qui a le focus (l'utilisateur se balade avec une telecommande, pas de souris...)

Quand je dis animer, je voudrais simplement la remplacer, pour l'instant, par une image plus grande.

Est ce possible ? je n'y arrive pas... HELP !!

Merci d'avance pour votre aide.
Antoine
Administrateur
antoine42 a écrit :

Quand je dis animer, je voudrais simplement la remplacer, pour l'instant, par une image plus grande.

Hello et bienvenue,

Je ne suis pas sûr d'avoir bien compris, mais ce serait quelque chose comme ça ?
Bonjour,
et merci de repondre aussi vite.

Je me suis mal exprimé...

Voila en fait l'utilisateur ne peut se deplacer qu'avec les fleches directionnelles de sa telecommande, et je voudrais agrandir l'image sur laquelle il se trouve, histoire de simplifier la navigation...

pour l'instant j'ai ecrit ce code, qui fonctionne sous IE, netscape, etc... mais pas sous ce satané "Fresco"

<td width="207"> <a id="one" tabindex="1" href="./astuce_index.html" onfocus="document.getElementById('toto').src='image.gif'" onblur="document.getElementById('toto').src='book.png'" > <img id="toto" height="128" src="book.png" width="128" > </a> </td>

voili voilou
Administrateur
antoine42 a écrit :
Voila en fait l'utilisateur ne peut se deplacer qu'avec les fleches directionnelles de sa telecommande

Là en fait, il va falloir donner des informations, parce qu'a priori, le concept de "télécommande" et de "web" me parait plus que flou Smiley sweatdrop

Et je n'ai pas vraiment compris l'utilité d'une cellule de tableau dans ton code Smiley confus
ok, je vais detailler...
la Set Top Box ne sait afficher que du HTML...

je developpe une interface qui permet à l'utilisateur, assis devant sa TV, de choisir entre un univers "kiosque" et la télévision.

Quand il allume sa Set Top Box, s'affiche ma fameuse interface, composée d'un tableau tout simple, à 2 cases : l'une avec une icone TV, l'autre avec celle du kiosque.

Et il doit pouvoir choisir entre les 2 grace à sa telecommande.

Les interruptions de la telecommande sont gérées en JavaScript, et les touches de directions interprétées comme des tabulations dans le HTML.

Simplement comme le pointeur n'apparait pas, j'aimerai "grossir" l'icone qui à le focus, pour que l'utilisateur ne soit pas perdu...

Et je n'arrive pas à utiliser l'attribut "onFocus" pour faire cela.

Est-ce que c'est possible ?
je poste le code HTML, ca sera peut etre plus clair ... 



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  
  <script type="text/javascript">
function setFocus()
{
document.getElementById("one").focus()
}
  </script>
  
  <title>Welcome</title>
</head>

<body onload="setFocus()">

<table height="200" width="620">

  <tbody>

    <tr height="150">

 <td width="207"> <a id="one" tabindex="1" href="./astuce_index.html" onfocus="document.getElementById('toto').src='image.gif'" onblur="document.getElementById('toto').src='book.png'" > <img id="toto" height="128" src="book.png" width="128" > </a> </td>

 <td width="207"> <a id="two" tabindex="2" href="./index.html"> <img height="128" src="./TV2.png" width="128"> </a> </td>
 
  <td width="207"> <a id="three" tabindex="3" href="./Proxiclic.html"> <img height="128" src="./image.gif" width="128"> </a> </td>

 </tr>

    <tr height="50">

 </tr>
  
  </tbody>
</table>

</body>
</html>


cela fonctionne sur mon PC, mais je pense qu'il doit exister une maniere plus "propre" de realiser cet effet...
de sorte qu'il marche sur un navigateur TRES TRES limité ...
Modifié par antoine42 (06 Oct 2006 - 15:22)
Administrateur
Attention, tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
Salut Smiley biggrin

Peut-être quelque chose comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function setFocus()
{
document.getElementById("one").focus()
}

i1 = new Image;
i1.src = "did2.gif";
</script>

  <title>Welcome</title>
</head>
<body onload="setFocus()">
  <tbody>
    <tr height="150">
 <td width="207"> <a id="one" tabindex="1" href="./astuce_index.html" onfocus="nomimage1.src=i1.src" onblur="nomimage1.src='did1.gif'" > <IMG SRC="did1.gif" BORDER=0 WIDTH=149 HEIGHT=192 HSPACE=0 VSPACE=0 NAME="nomimage1"> </a> </td>

 <td width="207"> <a id="two" tabindex="2" href="./index.html" onfocus="nomimage2.src=i1.src" onblur="nomimage2.src='did1.gif'" > <IMG SRC="did1.gif" BORDER=0 WIDTH=149 HEIGHT=192 HSPACE=0 VSPACE=0 NAME="nomimage2"> </a> </td>

  <td width="207"> <a id="three" tabindex="3" href="./Proxiclic.html" onfocus="nomimage3.src=i1.src" onblur="nomimage3.src='did1.gif'" > <IMG SRC="did1.gif" BORDER=0 WIDTH=149 HEIGHT=192 HSPACE=0 VSPACE=0 NAME="nomimage3"> </a> </td>
 </tr>
    <tr height="50">
 </tr>
  </tbody>
</table>
</body>
</html>

@+
Sujet clos
Aller à