18008 sujets

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

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

Pages :
(reprise du message précédent)

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 ?
mistike a écrit :
Sérieux, FoxLeRenard, on n'est pas là pour ..........

C' est pas sympa, car j'avais mis justement un model complet, et ensuite j'ais pris le temps sur la demande de Heyoan de le rendre aux normes de validation,
et en plus j'ais compris qu'il répondait mal a la question posé, pas grave, chacun fait ce qu'il peut pourl'entraide entre nous.

Je ne crois pas que je n'ais jamais fais état depuis que je viens ici, de sois disant compétences , j'ais passé l'age. Smiley rolleyes
Modifié par FoxLeRenard (04 May 2009 - 17:47)
Quoi qu'il en soit je rappelle (et ça me concerne également Smiley murf ) que le forum n'est pas fait pour papoter entre nous mais pour aider à répondre aux questions posées.

Merci donc de s'en tenir au sujet et strictement au sujet. Smiley cligne
FoxLeRenard a écrit :

C' est pas sympa, car j'avais mis justement un model complet, et ensuite j'ais pris le temps sur la demande de Heyoan de le rendre aux normes de validation,
et en plus j'ais compris qu'il répondait mal a la question posé, pas grave, chacun fait ce qu'il peut pourl'entraide entre nous.

Je ne crois pas que je n'ais jamais fais état depuis que je viens ici, de sois disant compétences , j'ais passé l'age. Smiley rolleyes


OK, excuse moi, j'avoue que la discussion prenait un tour un peu stérile et sans sortie qui m'a semblé un peu... ... bref. Smiley cligne

Bon ben piske personne ne veut répondre à ma super question, je m'en vais essayer ça dans mon coin Smiley cligne
Bon, voici un premier jet, perfectible, pas accessible, et qui ne marche pas sans javascript. Mais bon, c'est vite fait Smiley cligne

Au moins c'est valide Smiley langue

C'est ici : http://www.mistike.com/divers/trilobites/

Les plus :

* Une seule image < 100Ko donc un seul chargement et pas de "clignotement".
* L'image en question est placée dans le document HTML et pas dans le CSS car ce n'est pas de la déco.
* Je suis trop forte en détourage à la hache, si si.
* Code simple et clair (?)
* On peut faire pareil pour le "hover" facilement
* On peut améliorer en changeant le "alt" de l'image par exemple

Les moins :

* javascript obligatoire - il faut implémenter une solution en cas de JS désactivé.
* load supplémentaire du script et de la librairie JQuery ( < 60 Ko).
* Pas testé sous autre chose que FF3/Vista

Le code HTML :


<!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" lang="fr" xml:lang="fr" >
	<head>
		<title>Les Trilobites - Essai 1</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="trilobite.js"></script>
		<style type="text/css" media="all">
			@import url("/divers/trilobites/default.css");
		</style>

	</head>
	
	<body>

		<div id="trilobite">
			<img src="trilobite.jpg" alt="Trilobite" />
		</div>
		
		<div id="liste">
		
			<p>Cliquez sur une des parties du corps pour voir l'illustration</p>
			<ul>
				<li><a class="cephalon" href="#">Céphalon</a></li>
				<li><a class="thorax" href="#">Thorax</a></li>
				<li><a class="pygidium" href="#">Pygidium</a></li>
			</ul>
			<a href="#">Et ici pour revenir à l'image vierge.</a>
			
		</div>
		
		<div id="texte">
			<a href="#">Un autre lien qui n'a rien à voir.</a>
		</div>
	</body>
</html>


CSS: 



#trilobite
{
	float: left;
	width: 283px;
	height: 393px;
	overflow: hidden;
	margin: 20px;
}

#liste
{
	float: left;
}

#trilobite img
{
	position: relative;
}

#texte
{
	clear: left;
}


Et JQuery :


$(document).ready(function() 
{

    $("#liste a").click(function(event)
	{
		event.preventDefault();
		if($(this).hasClass("cephalon"))
			{$("#trilobite").children("img").css("left","-283px");}
		else if($(this).hasClass("thorax"))
			{$("#trilobite").children("img").css("left","-566px");}
		else if($(this).hasClass("pygidium"))
			{$("#trilobite").children("img").css("left","-849px");}
		else
			{$("#trilobite").children("img").css("left","0");}	
	}
);
	
});


Libre aux pros du JS de rendre mon bout de code plus propre si possible (j'aime pas les elseif Smiley cligne )

Maintenant, la question est : peut-on implémenter ça sans JS ? Je pense à la proposition de <span> d'Arsène que je n'ai pas testée.
Modifié par mistike (05 May 2009 - 13:29)
Arctinurus a écrit :
Oui... Mais non... Smiley decu

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...


Alors tu crées autant d'images qu'il le faut (les contours délimitant une zone) en PNG ou GIF transparent et ça ira tout seul.
Désolé de ne pas avoir répondu plus tôt, j'étais éloigné pour raison professionnelle de mon PC...

J'ai donc trouvé la solution sur le site conseillé plus haut.

Je ne sais pas si c'est super accessible, je viens juste de terminer l'intégration, et ça passe au test de conformité du w3c.

Je connais la méthode des portes coulissantes, mais là, j'ai déjà 19 parties à indiquer je pense que ça serait un peu chaud...

Vous en pensez quoi?

/* Lien édité : problème résolu */

Voici la source :

entre les balises <head> :

<script type="text/javascript">
/*
on precharge les images de substitution
*/
i1 = new Image;
i1.src = "./images/morpho/cephalon.png";
i2 = new Image;
i2.src = "./images/morpho/thorax.png";
...


dans une div pour l'image :

<div id="image">
<img src="./images/morpho/morpho01.jpg" id="nomimage1" alt="Schéma général morphologie trilobite"/>
<noscript>
<p>Votre navigateur ne fonctionne pas correctement avec Javascript ou le bloque. Actuellement, aucun contenu alternatif n'est proposé.</p>
</noscript>
</div>


Au niveau de chaque lien


<a href="#" onmouseover="nomimage1.src=i1.src" onmouseout="nomimage1.src='./images/morpho/morpho01.jpg'">Céphalon</a>


Je réfléchis à ce que je pourrais mettre en texte alternatif... Je vais certainement mettre une image avec un lien vers une autre page, avec des légendes conventionnelles.

En tout cas, un grand merci à tout ceux qui on prit le temps de me répondre. Smiley smile

Je garde la solution Jquery sous le coude aussi.
Modifié par Arctinurus (28 Jul 2009 - 14:01)
Pages :
Sujet clos
Aller à