Over image --> devien un texte

tout est dan le sujet.

Peut'on passer sur une image pour que cela devienne une zone de texte de la même taille ???

Merci de me dire comment faire. Si possible en HTML / Javascript ( jai une sainte horreur du PHP/ASP )

Merci d'avance
Clément

www.modération

Edité par dominique la publicité est interdite sans l'accord préalable d'un administrateur du site, merci de lire les règles du forum
Modifié par dominique (19 Aug 2005 - 15:44)

Bonjour,
c'est possible en javascript, mais je n'en vois franchement pas l'intérêt ?

En fait ...
Je vais t'eliquer l'intéret que je trouve a cela, peut étre que tu me dira alors comment faire

Je veux faire un Roll Over a distance combiné a un roll over local.
Ce n'est pas parlant.

Imagine une image (thumbnail) petite, lorqu'on passe dessus elle change ( style plus calir ou plus foncé, juste pour faire beau ). lorsque l'on clique dessus, cette même image souvre en plsu grand dans un pop up ou une nouvelle page. Jusque la pas de probléme.

Mais je voudrait également que lorsque je passe mon curseur au dessus de la petite image (le thumbnail de départ) un texte de description apparraisse dans une zone que jaurais défini.

Je pourrais faire tou ça en image (en inserrant mon texte dans un carré blanc et en le transformant en image), mais ça serait alors trés difficile à changer le texte par la suite.

J'éspere que tu as compris mon but.

Et j'éspére que tu va m'expliquer comment faire

Merci d'avance

Je crois que j'ai trouvé ce qu'il fallait sur ton site. Mais explique quand même parce que je suis pas sur d'y arrivé ( vu le bordel dans mon code !)

Puis ça pourra servir a d'autre.

Ah ok j'avais mal compris. J'avais cru que tu voulais remplacer une image par un input text. Voilà pourquoi j'ai dit que c'était sans intérêt apparent.

Tu veux faire apparaître un texte dans une zone de text input text ou text area (1), ou dans une div masquée/affichée (2), ou changer le texte d'une div (3) ?


1. pour un textarea

<img src="trucmachin.png" alt="blablabla" onmouseover="document.getElementById('textarea').value = 'Bonsoir regardez ma belle image blablabla';" onmouseout="document.getElementById('textarea').value = 'Texte par défaut';" />

...

<textarea worws="3" cols="50" id="textarea">Texte par défaut</textarea>

2. div masquée / affichée

<img src="trucmachin.png" alt="blablabla" onmouseover="document.getElementById('madiv').style.display = 'block';" onmouseout="document.getElementById('madiv').style.display = 'none';" />
<div id="madiv">Bonsoir regardez ma belle image blablabla... </div>

3. Changer le texte d'une div

<img src="trucmachin.png" alt="blablabla" onmouseover="document.getElementById('madiv').innerHTML = 'Bonsoir regardez ma belle iamge blablabla... ';" onmouseout="document.getElementById('madiv').innerHTML = 'Texte par défaut';" />
<div id="madiv">Texte par défaut</div>

Voilà, avec ça, tu as tout ce qu'il te faut.

J'ai utilisé le code que tu donne sur ton site.

Mais voila, maintenant je voudrais que le texte saffiche dansune autre frame que celle ou se trouve l'image que je survole. Comment faire?
Il faut idiquer un target? ou bien présiser que la "div" se trouve ailleur ?


http://quentinc1.free.fr/...

[Édité par Stephan. Merci d'éviter de faire de longues URL qui déforment le forum]
Modifié par Stephan (21 Aug 2005 - 22:46)

dans ce cas il faut lui indiquer la frame...

Donc cette ligne :

document.getElementById('div1').innerHTML = str;

il faut la remplacer par quelque chose comme :

parent.frames['nom_de_frame'].document.getElementById('div1').innerHTML = str;

Si ça marche pas avec parent, essaie avec top.

Dans ce cas, utilise parent tout court à la place de parent.frames['nom_frame']
donc parent.document.getElementById......

Mais bon, les iframe, c'est caca.

Yeah ça marche!

Jveu pas te flatter mais tu déchire tout !

Merci beaucoup

IL n'y a pas de quoi. Merci à toi et à bientôt.

Comment modifier le script dispo sur ton site, pour qua la place dafficher un texte, il affiche une image.

Si le code été relativement similaire cela me faciliteré la vie

En effet je souhaite que lorsque ke l'on survole un texte, un texte apparaisse, mais aussi une image, dans un autre endroit de la page!

toujour avec mon petit probléme de iframe (qui est réglé, mais jai peur qu'avec un code totalement différent, celui ci revienne ).

merci!

Ben c'est simple : au lieu de document.getElementById(...).innerHTML = "bla bla bla";
rien ne t'interdit de mettre
document.getElementById(...).innerHTML = "<img src=\"...\" ... />";

function afficherTexte (str) {
parent.document.getElementById('div1').innerHTML = str;
}

Oui mais?
cette fonction, ou je ne sais ce que sais, ce str m'embéte.
Et lorsque je met une irl d'une image plus bas dans le code, il reconnait ça comme du texte, et donc ça plante de partout a cause des " ' " et des ";" .

Ben il n'y a qu'à mettre :
parent.document.getElementById('div1').innerHTML = "<p>blablablabla y compris le HTML</p><img src=\"test.gif\" alt=\"\" /><p>blablabla voilà</p>";

Le probléme c'est que dans le premier cas ( juste l'affichage dun texte ) on avait défini une variable afficher texte entre les balise HEAD, que j'utiliser en '"lappellant" lorsque jété dans les balises BODY.

Si je remplace dans ce script :

function afficherTexte (str) {
parent.document.getElementById('div1').innerHTML = str;
}

par:

function afficherTexte (str) {
parent.document.getElementById('div1').innerHTML = "<p>blablablabla y compris le HTML</p><img src=\"test.gif\" alt=\"\" /><p>blablabla voilà</p>";
}

Alors ça sera toujours la méme image qui saffichera, peut importe sur kelle image mon curseur ce trouve ... comprend tu?

y a til une solution ?

@SparkendeFugl

Je t'invite à lire Aide/Règles.

En particulier :

Aide/Règles a écrit :

Le forum n'étant pas équipé d'un vérificateur d'orthographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux. Il est rappelé également que ce forum est... un forum, et non un tchat ou un support SMS. Vous êtes donc priés de respecter un minimum ce langage qu'est le français.

Allez ! Un effort.
Modifié par Stephan (21 Aug 2005 - 22:45)

Oui il y a une solution, utiliser un tableau

var tab = ["Texte1", "Texte2", "Texte3"];

function afficherTexte (n) {
document.getElementById(...).innerHTML = tab[n];
}

et puis :

<img src="...." onmouseover="afficherTexte(0);" ... />
<img src="..." onmouseover="afficherTexte(1);" ... />