[résolu]Affichage d'image lors du survol d'un lien.

Le doctype ce n'est pas le problème ici

Adapter des codes java pour qu'ils soient valides, je sais faire... Le truc c'est que je ne comprend pas assez le javascript... Et du coup, j'arrive pas à adapter le code correctement à tous les coup pour que ça marche...

Pour dire mon niveau : Arsène à l'air de dire qu'il y a une énormité dans le code... en dehors des majuscules à certains niveau que le xhtml strict déprécie, ja vois pas le problème du tout.
Modifié par Arctinurus (29 Apr 2009 - 14:47)

Arctinurus a écrit :
Pour dire mon niveau : Arsène à l'air de dire qu'il y a une énormité dans le code... en dehors des majuscules à certains niveau que le xhtml strict déprécie, ja vois pas le problème du tout.

Ben notamment le fait que l'élément LAYER n'est supporté par aucun navigateur à l'exception de Netscape !
Modifié par Heyoan (29 Apr 2009 - 15:09)

J'ai relevé cette ligne de code pour son exemplarité :
- document.write => utiliser la création d'objets DOM adéquate
- <LAYER> => inconnu au bataillon des balises Html valides
- name => id serait plus approprié, name étant out pour cet usage
- top=10... => à mettre dans Css sous la forme top:10px; left:100px;
- visibility='hide' => idem + hidden
Pas mal pour une seule ligne.

Quelqu'un a une autre alternative?

Sinon, dès que j'ai assez de temps, j'essaie de me trouver un cours de js...

Juste pour le fun une solution avec deux images et sans javascript : mettons que tu veuilles montrer la carte d'une région et qu'un cercle rouge vienne montrer où se situe une ville au passage de la souris sur son nom dans la colonne de liens.
1. tu crées une image de la carte que tu places dans la page à sa bonne place.
2. tu crées un gif transparent ou un png du rond rouge.
3. tu associes à chaque item de la liste un span vide placé en position exactement superposée à la carte et que CSS masque par un display:none.
4. un hover sur le a de la liste demande à ce que ce div devienne display:block et soit doté de l'image du rond rouge en background, différemment positionnée selon la ville concernée.

J'ai pas essayé mais ça devrait le faire.

HTML :

<li><a id="ville1">ma ville 1<span></span></a></li>
<li><a id="ville2">ma ville 2<span></span></a></li>
...

CSS :

a span { position / taille / display:none / etc... }
a#ville1:hover span { display:block; background: url('rond-rouge.png') 120px 30px no-repeat; }
...

Tu peux aussi créer plus simplement un span contenant le rond rouge en image incluse et le placer directement en position au bon endroit par CSS. La première solution est un peu mieux puisque le rond rouge n'ayant pas de sens en soi (sans être positionné) il peut être considéré comme "image décorative", ne pas être doté de alt et ne pas apparaître dans certains cas de figure.
Pour rendre la chose plus pertinente tu peux encore "zoomer" la portion de carte et la placer dans le rond rouge. Pour ça soit tu crées autant d'images 'rond-rouge' que de villes, soit, plus subtil mais plus complexe, tu utilises une seule image de ta carte agrandie que tu gères avec la fonction CSS clip.


Bon courage.
Modifié par Arsene (30 Apr 2009 - 09:54)

Oui... Mais non...

C'est pas une carte où des ronds peuvent suffire : il s'agit de délimiter des zones sur le schéma morphologique d'un animal... Donc, les ronds ne suffisent pas du tout...

moi, je n'y connais pas grand chose au javascript, mais tout ce que j'utilise je le prend sur ce site : http://www.editeurjavascript.com/scripts/

Il y a de tout et de rien ^^. Tu auras peut être du temps à consacrer pour fouiller mais lorsque tu auras trouvé, c'est en généralement bien expliquer, avec les compatibilités des navigateurs et parfois une personnalisation en direct sur le site.

Heyoan a écrit :
Arg !
@FoxLeRenard > Est-ce vraiment trop te demander ... (c'est vrai que ça ne fait que la troisième fois que je te le demande !)

Oui oui je sais , sans doute la fléme

Bon du coup je l'ais fait, mais il me trouves encore des erreurs (en fait 3 fois la même) mais je ne vois pas quoi ???
tu peux m'aider ?

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script language="javascript" type="text/javascript">
<!--
function VoirImg(Limg) {
  LeHtml="<img border=0  src='"+Limg+"' style='POSITION: absolute; TOP: 0px;LEFT:0px;Z-INDEX: 95' >";
  if (document.all) {
    MonDiv.innerHTML=LeHtml;
    document.all["MonDiv"].style.top=20;
    document.all["MonDiv"].style.left=120;
    document.all["MonDiv"].style.visibility="visible";
  }
  else if (document.getElementById) {
    document.getElementById("MonDiv").innerHTML=LeHtml;
    document.getElementById("MonDiv").style.top=20;
    document.getElementById("MonDiv").style.left=120;
    document.getElementById("MonDiv").style.visibility="visible";
  }
}
function CacheMonDiv() {
          if (document.all) {document.all["MonDiv"].style.visibility="hidden";}
        else if (document.getElementById){document.getElementById("MonDiv").style.visibility="hidden";}
}

function CreDiv() {
  	if (document.all) {
        document.write("<div id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></div>");
	}
	else if (document.getElementById) {
        document.write("<div id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></div>");
	}
}
//-->
</script>
</head>

<body>
<script language="javascript" type="text/javascript">CreDiv()</script>
<a href="#" onmouseover="VoirImg('test1.jpg')" onmouseout="CacheMonDiv()" >Un Lien </a>
<br />
<a href="#" onmouseover="VoirImg('test2.jpg')" onmouseout="CacheMonDiv()" >Deuxieme Lien</a>
<br />
<a href="#" onmouseover="VoirImg('test3.jpg')" onmouseout="CacheMonDiv()" >Autre Lien</a>
<br /><br />

</body></html>

Modifié par FoxLeRenard (04 May 2009 - 08:23)

FoxLeRenard a écrit :
mais il me trouves encore des erreurs (en fait 3 fois la même)

En fait avec ton doctype il y en a 10 :
> il faut supprimer language="javascript".
> ce n'est pas onMouseOver et onMouseOut mais onmouseover et onmouseout.
> tu ne peux pas mettre directement des éléments 'en-ligne' (A et BR) dans le BODY : ils doivent être contenus dans un élément de type bloc (d'ailleurs pourquoi BR et pas P ?)
> dans les document.write il faut échapper les </ en mettant <\/

Sinon :
> document.all est tout aussi obsolète que document.layer.
> je te renvoie à la réponse d'Arsene.
> je te renvoie également à une réponse que je t'avais déjà faite (au passage je t'invite fortement à lire le tuto que je te conseillais).
> dans ledit tuto on trouve notamment les 2 liens suivants qui parlent du DOM :
Cours de manipulation du DOM et DHTML (www.gchagnon.fr)
Le Modèle Objet du Document ou DOM (nyam's personal website)

Whaou SUPER ça valide 100%
merci encore

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
function VoirImg(Limg) {
  LeHtml="<img border=0  src='"+Limg+"' style='POSITION: absolute; TOP: 0px;LEFT:0px;Z-INDEX: 95' >";
  if (document.all) {
    MonDiv.innerHTML=LeHtml;
    document.all["MonDiv"].style.top=20;
    document.all["MonDiv"].style.left=120;
    document.all["MonDiv"].style.visibility="visible";
  }
  else if (document.getElementById) {
    document.getElementById("MonDiv").innerHTML=LeHtml;
    document.getElementById("MonDiv").style.top=20;
    document.getElementById("MonDiv").style.left=120;
    document.getElementById("MonDiv").style.visibility="visible";
  }
}
function CacheMonDiv() {
          if (document.all) {document.all["MonDiv"].style.visibility="hidden";}
        else if (document.getElementById){document.getElementById("MonDiv").style.visibility="hidden";}
}

function CreDiv() {
  	if (document.all) {
        document.write("<div id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></div>");
	}
	else if (document.getElementById) {
        document.write("<div id='MonDiv' style='position:absolute;top:0;left:0;visibility:hidden'></div>");
	}
}
//-->
</script>
</head>

<body>
<div>
<script type="text/javascript">CreDiv()</script>
<a href="#" onmouseover="VoirImg('test1.jpg')" onmouseout="CacheMonDiv()" >Un Lien </a>

<a href="#" onmouseover="VoirImg('test2.jpg')" onmouseout="CacheMonDiv()" >Deuxieme Lien</a>

<a href="#" onmouseover="VoirImg('test3.jpg')" onmouseout="CacheMonDiv()" >Autre Lien</a>

</div>
</body></html>

FoxLeRenard a écrit :
merci encore

Hem... de rien puisque :
> tu n'as pas échappé les </
> un code valide ne signifie en aucun cas qu'il soit accessible : ce n'est qu'une première étape.
> ton code JavaScript est intrusif (obstrusive in english) et obsolète.

En bref ce serait sympa de prendre le temps de lire les tutoriels que je te suggère régulièrement.

Heyoan a écrit :
Hem... de rien puisque :
En bref ce serait sympa de prendre le temps de lire les tutoriels que je te suggère régulièrement.

Faut pas aller trop loin, ne t'y trompes pas je suis du genre sérieux, et dés le début j'ais lu ce que tu m'indiquais, par contre j'en tire mon intime conviction, par rapport a ma façon de faire qui peut différer de la tienne.

Peut' étre plus tard j'utiliserais moins de javascript ,

Du reste il est pourtant indispensable parfois d'écrire

function switchdiv(divid,state) {
	var divObj = null;
	if (document.getElementById) {
		divObj = document.getElementById(divid);
		if(state) divObj.style.display = "block";
		else divObj.style.display = "none";
	} else if(document.all) {
		divObj = document.all(divid);
		if(state) divObj.style.display = "block";
		else divObj.style.display = "none";
	} else if (document.layers) {
		divObj = document.layers[divid];
		if(state) divObj.visibility = "visible";
		else divObj.visibility = "hidden";
	}
}

Modifié par FoxLeRenard (04 May 2009 - 12:12)

FoxLeRenard a écrit :
j'ais lu ce que tu m'indiquais, par contre j'en tire mon intime conviction, par rapport a ma façon de faire qui peut différer de la tienne.

Je ne comprends pas ce que tu veux dire.

Coder en JavaScript de manière à ce que la page soit accessible même s'il est désactivé/indisponible n'est pas une question de conviction mais de méthodologie.

Utiliser document.layer (qui servait pour Netscape 4) ou document.all (obsolète depuis IE5) n'est pas une question de conviction mais d'adaptation aux navigateurs. Idem pour le DOM...

Heyoan a écrit :
Je ne comprends pas ce que tu veux dire.
Utiliser document.layer (qui servait pour Netscape 4) ou document.all (obsolète depuis IE5) n'est pas une question de conviction mais d'adaptation aux navigateurs. Idem pour le DOM...

sauf que cet extrait est le javascript de cette page
juste pour te dire que javascript a besoins d'une certaine souplesse
c' est OK avec toi par contre que le javascript doit'étre un complément

par exemple si je refuse javascript, ici je sais simplement que je me ferais mes balises moi même, ça je comprends bien ta recommandation a ce sujet.
donc on peut écrire ici sans ajavscript !

de même sur ton site il doit y avoir un moyen de changer les fontes sans javascript ? j' ais pas controlé .

La question n'est pas d'accepter ou de refuser Javascript mais de l'utiliser de façon non-obstructive, c'est-à-dire qu'un outil de consultation où il serait désactivé rendrait quand même l'information intégralement même si elle se présente autrement. Là dans ton exemple ce n'est pas le cas. En plus, comme le dit Heyoan à longueur de posts, tes objets sont obsolètes.

Pourquoi ne pas utiliser simplement la "fameuse" technique des portes coulissantes ?

Il y a peut-être un moyen en CSS de cibler l'image lorsque l'on survole un des liens, je ne sais pas... sinon ça peut se faire avec JQuery en quelques lignes.

Non ?

Elle a combien de parties différentes, ta bébête ? Si c'est seulement trois, ça ne donnerait pas une image trop importante...
Modifié par mistike (04 May 2009 - 14:20)

mistike a écrit :
Pourquoi ne pas utiliser simplement la "fameuse" technique des portes coulissantes ?
Il y a peut-être un moyen en CSS de cibler l'image lorsque l'on survole un des liens, je ne sais pas... sinon ça peut se faire avec JQuery en quelques lignes.
Non ?
Elle a combien de parties différentes, ta bébête ? Si c'est seulement trois, ça ne donnerait pas une image trop importante...

Oui pour CSS , mais JQuery c' est tout juste bon pour ceux qui ne savent pas écrire en javascript du reste c' est du 100% javascript !

FoxLeRenard a écrit :


Oui pour CSS , mais JQuery c' est tout juste bon pour ceux qui ne savent pas écrire en javascript du reste c' est du 100% javascript !

1. jquery c'est pas uniquement pour ceux qui ne savent pas coder en javascript, pas mal de pros l'utilisent aussi

2. Mieux vaut utiliser jquery qui fonctionne de manière optimale et propre que de coder un truc soi-même complètement crarcra.
Modifié par Patidou (04 May 2009 - 15:54)

Patidou a écrit :

1. jquery c'est pas uniquement pour ceux qui ne savent pas coder en javascript, pas mal de pros l'utilisent aussi

Les Pros ils adorent trop leurs façon de coder, et leurs outils orientés objet, pour utiliser ces usines a gaz !!
Vraiment c' est pour ceux qui n'ont PasDouTi bon OK on a du te la faire déjas

Patidou a écrit :


2. Mieux vaut utiliser jquery qui fonctionne de manière optimale et propre que de coder un truc soi-même complètement crarcra.

Oh oui ça OK avec toi, du reste certains de mes moteurs ont étés repris,
et lorsque je regardes certains javascripts, il y a de quoi hurler
Modifié par FoxLeRenard (04 May 2009 - 17:07)

Sérieux, FoxLeRenard, on n'est pas là pour savoir qui fait pipi le plus loin. La question a été posée par quelqu'un qui ne sait pas faire de javascript, et la solution dont je parle s'adresse donc à lui. Que tu méprises ce genre d'outil parce que c'est pas "roots" et que c'est pour les nuls, c'est pas le sujet.

Et ça ne répond pas à ma question : tous les intervenants à ce post ont donné des pistes qui me semblent étonnamment compliquées, alors que -sans l'avoir testé en l'occurence-, une solution basée sur les portes coulissantes, du CSS et un petit poil de javascript, me paraît simple et propre... Et donc, qu'en pensent les pros du sujet ?