Pages :
Bonjour à tous,

J'ai récemment utilisé le tutorial album photo en javascript.
Mon objectif était que quand on click sur un image qu'elle apparaisse en gros mais qu'un texte sur le coté apparaisse en meme temps.

Ma solution a été de créer un calque et de faire apparaitre le texte a l'interieur pour avoir une liberté de placement.
Mais voila quand je fais la simulation sur mon ordi cela fonctionne mais une fois que je mets online le texte ne s'affiche pas. Enfin le calque en tout cas n'apparait pas.

Je suis un débutant dans le domaine et j'ai donc fait comme je pouvais, voici le code dans la page principale :
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 450px; top: 61px; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;"> 
  <dl id="photo">
<dt>&nbsp;</dt>
</dl>
</div>


Et voici le code dans le fichier script .js :
// JavaScript Document

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	// Et enfin le titre de la photo de taille normale

	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page



Merci encore pour votre aide[/i]
Bonjour,

D'après ton code, j'ai bien ton calque qui s'affiche en local et en ligne.

Pourrais-tu donner ton lien stp ?
Je comprends pas, ca ne fonctionne toujours pas.....

Et sous Firefox j'ai un décalage vers le bas du menu gauche et dans la partie "Frame" j'ai des petits tirés "-" comme des sauts de lignes qui apparaissent...mais cela qu'avec FireFox..
Modifié par brad689 (10 May 2006 - 09:05)
hmmmh, ton claque se trouve sous ton flash, tel qu'il est positionné, alors c'est normal que tu ne le vois pas Smiley sweatdrop
Salut Blue,

...Comment ca se fait que le calque ne soit pas placer a l'endroit ou je l'ai voulu en local?, en local le calque est au bonne endroit et apparait a la bonne place.

As tu une solution a ca ? Smiley smile
Héhé, oui mais sur Dreamweaver je suis obligé de mettre le calque a un endroit complement différent pour qu'il soit bien place online, alors quand local le calque apparait a l'emplacement initial

Etrange!! Smiley rolleyes Sinon Blue tu as vu que sur Firefox y a un decalage vers le bas du menu de gauche par rapport au conteneur..tu aurais une idée du pourquoi.?

hihiii Smiley biggrin
Salut blue,

En fait c'est un légé décalage de 5 mm a peut pres.

voila le résultat sou IE (le bon resultat):
upload/5939-IE.jpg

Voila le résultat sous Firefox:
upload/5939-firefox.jpg

Regarde "men clothing" a gauche n'est pas aligné a "all news" a droite.

Pour revenir au premier probleme blue, j'arrive a afficher mon calque avec le texte qui apparait a l'interieur selon des images différentes.
J'aimerais aussi personaliser le texte qui apparait dans ce calque, peut-on? (bold, couleur...etc...) je pensais a faire un .css qui ferais ca, j'ai essayé, mais j'ai pas trop reussi...lol
Modifié par brad689 (12 May 2006 - 05:16)
Merci blue!!

c'est vraiment sympa de m'aider Smiley biggrin
Sinon je teste le tuto que tu m'as envoyé, ca m'a l'air pas mal! Smiley smile
Euh par contre pour le Tuto y a quand meme un problème de taille :
apparement cela ne fonctionne pas sous Explorer Mac... Smiley sweatdrop

Ca a changé depuis ?
Arf, je ne sais pas, mais je te le proposais pour t'en inspirer afin de personnaliser ton texte.

Tu es sous Explorer Mac ?
Pour ton décalage, il faut juste que tu enlèves le :

<p>

avant :

<img src="http://www.invad.com/inclusion2/images/Fond-Brownser.jpg" alt="" width="226" height="36" style="margin-left:17px ">

dans le html, dans la div gauche.
Smiley smile
Salut Blue,

Super ca fonctione du tonnerre tes un chefs!! Smiley smile

Un autre petit soucis.. Smiley lol
tu vois sur Firefox des que tu arrives sur le site tous les textes apparaissent en soulignés et des petis tirés se mettent a des endroits comme des sauts de lignes... Smiley confus Ca donne l'impression que la feuille de style.css est pas pris en compte. Sous IE y a pas de soucis.

Résultat sous Firefox :
upload/5939-News.jpg

Normalement seulement les liens cliquable sont soulignés
Modifié par brad689 (13 May 2006 - 11:36)
une chef Smiley lol

Si tu enlèves l'attribut :

text-decoration: underline;

à ta div :

.liens

le soulignement disparaît sous FF Smiley smile
Re-salut Blue,

Autant pour moi tu es une Chef alors Smiley lol

Ben si je retire le soulignement tous mes liens ne l'auront plus... Smiley confus

Comment faire pour que cela n'affecte pas mes liens ?
J'ai essayé de créer un nouveau style dans le Css d'origine (texte) sans "underline" et le problème persiste toujours....comprend pas..
Modifié par brad689 (13 May 2006 - 12:54)
Pages :