Sujet Précédent Sujet Suivant

Apparition/disparition image

Résolu/Fermé
Damien1987 - 19 juil. 2010 à 21:42
 Damien1987 - 20 juil. 2010 à 02:58
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


A voir également:

8 réponses

Réponse 1 / 8
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
19 juil. 2010 à 22:34
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>
0
Réponse 2 / 8
Damien1987
19 juil. 2010 à 22:52
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
0
Réponse 3 / 8
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
19 juil. 2010 à 23:05
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.
0
Réponse 4 / 8
Damien1987
Modifié par Damien1987 le 19/07/2010 à 23:18
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 .....
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
19 juil. 2010 à 23:47
Pourrais-je voir ta page en ligne ?
0
Réponse 6 / 8
Damien1987
Modifié par Damien1987 le 20/07/2010 à 00:07
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
0
Réponse 7 / 8
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
20 juil. 2010 à 00:43
Il faudra utiliser du CSS.
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#part_13663
0
Réponse 8 / 8
Damien1987
20 juil. 2010 à 02:58
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
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
Benji -

20 réponses