Cherche script(PHP, Javascript)pour images

Fermé
midiweb - 21 sept. 2004 à 02:25
 crikooo - 3 juil. 2007 à 11:39
salut, je cherche un script Javascript ou autre langage qui
1) me permet d'afficher une image agrandie après un clic dessus
2)qui remplace les frames, pour diviser une page web en 3 ou 4 parties:
-haut:bannière
-gauche:menu
-droite:miniatures
-milieu:image agrandie
3) qui m'affiche l'image agrandie dans la fenêtre du milieu et PAS dans une nouvelle fenêtre.

Merci
A voir également:

4 réponses

jarko Messages postés 11 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 26 mai 2005 2
21 sept. 2004 à 09:32
1)il suffit de capter l'événement onClick
2)un tableau peut faire l'affaire, mais pourquoi se apsser des frames?
3) suffit de nommé la frame ou la page dans laquelle tu veux afficher et de mettrte dans la balise l'attribut target="nomDeLaFrame"

voila un début d'idée d'axe de recherche
0
Utilisateur anonyme
21 sept. 2004 à 10:11
Pour répondre en pertie à ta question:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<style>
		body{
			background-color: #444444;
			color: #eeeeee;
		}
		
		img{
			border-style: solid;
			border-width: 1px;
			border-color: #eeeeee;
		}
		
		img.clickable{
			border-color: red;
		}
		
		table.frame{
			text-align: center;
			vertical-align: text-top;
			border-style: none;
			border-width: 0px;
			font-size: 10px;
			font-family: Verdana, Arial, Helvetica, Times;
			width: 100%;
		}
		
		tr{
			border-style: none;
			border-width: 0px;			
		}
		
		th{
			border-style: none;
			border-width: 0px;				
		}
		
		td{
			border-style: none;
			border-width: 0px;
			vertical-align: top;			
		}
		
		td.frame{
		}
		
		td.banner{
			colspan: 3;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			height: 80px;			
		}
		
		td.menu{
			background-color: #888888;
			text-align: left;
			width: 120px;
		}
		
		td.centre{
			text-align: justify;
			height: 800px;
		}
		
		td.miniatures{
			background-color: #222222;		
			text-align: center;
			vertical-align: top;
			width: 80px;
			font-size: 8px;
		}				
	</style>
	
	<script language="javascript" type="text/javascript">
		function initializeScripts(){
			initializeClickableImages();
		}
		
		function initializeClickableImages(){
			clickableImages = findTagsByAttribute('img','className','clickable');
			for(ci=0 ; ci<clickableImages.length ; ci++){
				window.status +="Image" + parseInt(ci+1) + " initialized"; 
				clickableImage = clickableImages[ci];
				clickableImage.onclick=displayImage;
			}		
		}
		
		function displayImage(){
			tdCentre = findTagsByAttribute('td','className','frame centre')[0];
			
			img = new Image();
			img.src = this.src;
			img.width = this.width;
			img.height = this.height;
			img.alt=this.alt;
			xyFactor = this.width/this.height;
			if(xyFactor>0){
				img.width=640;
				img.height=parseInt(img.width/xyFactor);
			}else if(xyFactor<0){
				img.setAttribute("height","320");
				img.setAttribute("width",parseInt(img.height)*xyFactor);				
			}else{
			}
			tdCentre.innerHTML="<center>"+img.outerHTML+"<p/><span style='color: #eeeeee; padding: 10 0 10 0;'>"+img.alt+"</span></center>";	
		}
		
		function findTagsByAttribute(tagName, attributeName, attributeValue){
			tagList = document.getElementsByTagName(tagName);
			return findElementsByAttribute(tagList, attributeName, attributeValue)
		}
		
		function findElementsByAttribute(elmList, attributeName, attributeValue){
			elms = new Array();
			for(i=0 ; i<elmList.length ; i++){
				elm = elmList[i];
				if(elm.getAttribute(attributeName).toUpperCase()==attributeValue.toUpperCase()){
					elms[elms.length]=elm;
				}
			}
			return elms;
		}		
	</script>
</head>

<body onload="initializeScripts();">
	<table class="frame">
		<tr width="100%">
			<td class="frame banner">
					Banner
			</td>
		</tr>
		<tr width="100%">
			<td class="frame menu">
					Menu
			</td>
			<td class="frame centre" >
					
			</td>
			<td class="frame miniatures">
					Cliquez sur une photo pour l'aggrandir
					<p/>
					<table>
						<tr>
							<td><img class="clickable" src="./1.jpg" width="40px" alt="Commentaire image 1" /></td>
						</tr>
						<tr>
							<td><img class="clickable" src="./2.jpg" width="40px" alt="Commentaire image 2" /></td>
						</tr>						
					</table>
			</td>			
		</tr>
	</table>


</body>
</html>



Mais il te faudra générer à cahque fois une nouvelle page contenant un set de <table>.

C'est possible côté serveur avec JSP (Java), ASP, ou PHP.

;-)
HackTrack
0
Merci. Pourquoi pas les frames?? Parce-qu'ils utilisent les ascenseurs que je trouve inesthétiques et lourds pour le site que je veux faire (sur la photo). Un ex. une image occupe la fenêtre du centre et voilà que m'apparaît deux ascenseurs pour voir seulement quelques pixels en dessous de l'image et les miniatures à gauche. Et encore cela varie selon les écrans et la résolution.
Aussi, chaque frame dans les moteurs de recherche sont référencés comme une seule page html et non les trois frames dans mon cas. Je n'ai pas trouvé la parade à cela.

Mais il te faudra générer à cahque fois une nouvelle page contenant un set de <table>.

C'est possible côté serveur avec JSP (Java), ASP, ou PHP.


Peux-tu stp être plus explicite bien que tu m'aies déjà beaucoup aidé. Je vais essayé ton script qui rejoint certainement mes desirata. J´étudie le PHP depuis quelques mois et n'ai pas trouvé équivalent en PHP. Devrais-je aussi étudié le Javascript. pour affiner les scripts que je télécharge?

Et en passant, y-aurait-il des éditeurs visuels avec completion pour le Javascript un peu ce qu'il y a pour le VB, c++,etc...?


Ciao!
0
oui, merci,
la page s'affiche bien en gris, prometteuse,mais évidemment aucune photo. Car où écrit -t-on les adresses des images en javascript?
svp, un petit cours de javascript.
car je comprends le html, le php, mais là c'est une autre langue.
et donc je ne vois pas ou stocker ou liés les images.
svp.
0