5568 sujets

Sémantique web et HTML

bonjour
voilà mon problème, j'ai sur mon site une page qui fonctionne en javascript et qui permet d'afficher des images en cliquant sur des vignettes (assez classique...) et en fait je souhaiterai adapter mon code pour pouvoir faire la mem chose avec des animations flash en swf
sauf que ... j'y arrive pas j'ai bien essyé avec une <object>...</object> mais je maitrise pas assez pour adapter mon code Smiley ohwell

pour voir le visuel de la galerie
http://perso.wanadoo.fr/pandoetlemonde/testnewdesign/peinture.html

et pour le code javascript
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 ayaig_pict qnt pour id bui 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


et extrait de ma page html:
<div class="page">
<h1>:: Croquis ::</h1>
<p><a href="competences.html">&lt;&lt; retour</a></p>
<p><a href="peinture.html">Peinture</a> / <a href="croquis.html">Croquis</a> / <a href="info.html">Infographie</a></p>
<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="../testnewdesign/animations/intro_etres.swf" title="Intro etres">
		<img src="croquis/vignettes/bonomarmure.mini.jpg" alt="Le titre de la photo 1" width="70" height="67" />
		</a></li>
		
		<li><a href="../testnewdesign/peintures/bonommozaik.jpg" title="bonom Mozaik">
		<img src="../testnewdesign/peintures/vignettes/bonommozaik.mini.jpg" alt="Le titre de la photo 2" />
		</a></li>	
	</ul>

	<dl id="photo">
		<dt>Arbre</dt>
		<dd>
		<img id="big_pict" src="../testnewdesign/peintures/arbre.jpg" alt="Arbre en taille normale" /></dd>
	</dl>
</div>
</div>


voilà merci beaucoup à ceux qui prendront le temps de regarder cà Smiley smile
[/i]
Modifié par akapando (31 Oct 2005 - 17:29)
bon j'avance un peu
jai modifié le code javascript ainsi :
for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			big_photo.data = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.titre = 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
		};
	}


et le code html ainsi

<dl id="photo">
		<dt>Arbre</dt>
		<dd>
		<!--[if !IE]> Standard XHTML object instanciation <!-->
<object id="flash00" type="application/x-shockwave-flash" data="../new_site/animations/intro_etres.swf" width="400" height="300">
<!--><!--[endif]-->

<!--[if IE]-->
<object id="flash00" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" width="400" height="300">
<!--[endif]-->
<param name="big_pict" value="../new_site/animations/intro_etres.swf" />
</object>
		
		</dd>
	</dl>


sauf que là qd je clique sur le lien ca ne souvre pas dans lendroit predefini mais en pleine page Smiley decu
[/i]