Apparition/disparition image

Résolu/Fermé
Signaler
-
 Damien1987 -
Bonjour!

je vous contact car j'ai un problème.
j'espère que vous allez pouvoir m'aider ... cela fait depuis ce matin que je passe de site en site pour trouver mon problème.

je buche en ce moment sur un site perso,
je ne suis absolument pas formé en création de site,
mais peu à peu j'apprends de moi même.

cependant, là je suis bloqué, et les tuto ( qui me servent de cours) ne suffisent pas.

je voudrais faire en sorte que lorsque je clic sur un texte, une image apparaisse,
puis en cliquant sur un autre texte, l'image (1) disparaisse pour faire apparaitre l'image (2)

comme illustré ci-dessous.
http://img7.hostingpics.net/pics/508064menu.png

voici comment j'ai pour le moment procédé,
cependant, au moment de cliquer, il me faut cliquer une une toute petite partie du texte, située en haut, pour que l'image associée apparaisse.

l'HTML
dans le <head>:

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>


dans <body:

<a onclick='Switcher("image1", "block")'>texte affiché</a>
<img src=image_devant_apparaitre.gif" id="image1" class="cache" />


le script.js
function Affiche(id,type) {
	try	{
	document.getElementById(id).style.display = type;
	}
	catch (err) {
		if (err.message != 'document.getElementById(id) has no properties') {
			throw err;
		}
	}
}
// Fonction pour "switcher" entre Afficher/Cacher
function Switcher(id, type) {
switch (document.getElementById(id).style.display) {
	case type:
		Affiche(id, 'none');
	break;
	default :
		Affiche(id,type);
	break;
	}
}


le style.css
.cache {display:none;}


J'espere que vous saurez m'aider.
merci d'avance.
Damien


8 réponses

Messages postés
18620
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
5 décembre 2021
4 340
Salut.

Je ne suis pas sûr de bien avoir compris, mais voilà ce que je te propose pour le HTML :
<body>
<div class="left_column">
    <a href="#" onclick="afficher('image1.png'); return false;">Image 1</a>
    <a href="#" onclick="afficher('image2.png'); return false;">Image 2</a>
    <a href="#" onclick="afficher('image3.png'); return false;">Image 3</a>
    <a href="#" onclick="afficher('image4.png'); return false;">Image 4</a>
</div>

<div class="right_column">
    <img src="image1.png" alt="Texte alternatif" id="switchableImage" />
</div>
</body>


Et pour le Javascript, dans le head :
<script type="text/javascript">
function afficher(url) {
     document.getElementById('switchableImage').src = url;
}
</script>
Merci de ta réponse c'est gentil,
c'est tout a fait ca oui.

j'ai fait les modifs comme tu m'as dis, mais j'ais toujours ce soucis de selection.
il faut aller bien haut pour que mon curseur se transforme en main ( qui me donne le droit de cliquer donc)
sans quoi, si je vais un peu en bas ( tout de meme sur le lien) en baladant la souris, il ne m'est pas possible de cliquer.

j'ai fait une capture d'image pour montrer jusqu'ou je dois monter avec la souris, pour pouvoir cliquer

http://nsa14.casimages.com/img/2010/07/19/100719104927140444.png

niveau "pratique" ... c'est pas tres pratique justement .... hahaha

une solution ?
merci encore
Messages postés
18620
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
5 décembre 2021
4 340
Ce n'est pas un problème au niveau du code que je t'ai donné.
Regarde dans le CSS (même si je n'en vois pas vraiment), ou bien essaye avec le curseur par défaut de ton OS.
bien j'ai laissé les curseurs par defauts de l'OS :-S

(en fait, la main sur la capure d'ecran, c'est moi qui l'ai rajouté ... on ne voit pas la souris en faisant 'impécr')

j'ai testé aussi en remplaçant le texte "cliquable", par une image "cliquable";
et là aussi j'ai ce probleme ... avec plusieurs formats d'images, je ne peux pas cliquer où je veux sur l'image pour faire apparaitre mes elements, mais qu'a certains endroits.

je ne comprends pas pourquoi, car j'ai deja des 'textes' et des 'images' "cliquables" pour aller sur une autre page.HTML, et ce probleme n'intervient pas .....
Messages postés
18620
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
5 décembre 2021
4 340
Pourrais-je voir ta page en ligne ?
ha bah en fait le probleme et resolu ...
j'ai peur de dire la raison du probleme ...

je me lance ...
j'ai oublié une ligne qui correspondait à une image qui n'existait plus.
donc en regardant la page, on ne voyait rien .. mais le cadre invisible était toujours là, et passait en fait au dessus du texte, qui le rendait inaccessible ...

j'ai honte .... XD

par contre, j'ai pas trop envi de garder cette police, ni la couleur et le souligné.

tu saurais m'aiguiller ?

en tout cas merci pour ton aide, se que tu m'as donné c'est exactement se que je voulais =)

EDIT: ainsi que choisir la position de l'image à afficher.
DSL, je suis pas fort doué, j'ai appris a le faire ca.. mais j'ai pas trop mes repères avec cette nouveauté ( pour moi) =S
Messages postés
18620
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
5 décembre 2021
4 340
Ok merci, j'ai énormément avancé grâce à toi, c'est gentil =)

j'ai réussi à positionner les images, le texte, et à bien mettre en forme comme je voulais.

la structure du site c'est maintenant faite, je vais pouvoir passer au contenu ;)

Je te laisse voir de toi même le 'menu' dont tu m'as aidé à faire ^^

https://www.venez.fr/error.fr.html?id=1&uri=http%3A%2F%2Fjustin-nails.netai.net%2Fmurderdolls%2Findex.html