Disposizione riquadro [Era: help me]

sangi89

Nuovo Utente
5 Gen 2008
1
0
0
salve ragazzi
sn alle prese cn il mio primo sito internet! ke strss! lo sto facendo in html e ho dovuto inserire uno scrit per creare una galleria di immagini con miniature e ingrandimento incorporate nella pagina ottenendo qsto:


ecco il codice html:

<html>
<head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<link rel="stylesheet" href="gallery.css">
<script type="text/javascript" src="onpage.js"></script>

</head>

<body background="1.jpg" bgproperties="fixed">


<div id="container">
<div id="header">
<h2></h2>
</div>
<div id="gallery">
<div id="zoom"><h3 id="titolo">Clicca sulle miniature per vedere gli ingrandimenti.</h3>
<img src="empty.jpg" id="bigimage" alt="">
</div>
<div id="minipics">
<ul>
<li><a href="egg.jpg"><img src="egg_small.jpg" alt="uovo" title="Uovo"></a></li>
<li><a href="field.jpg"><img src="field_small.jpg" alt="Campo di grano in una notte d' estate" title="Campo di grano in una notte d' estate"></a></li>
<li><a href="orange.jpg"><img src="orange_small.jpg" alt="Arancia digitale" title="Arancia digitale"></a></li>
<li><a href="forestonWater.jpg"><img src="forestonWater_small.jpg" alt="foresta frullata" title="Foresta frullata"></a></li>
<li><a href="sleep.jpg"><img src="sleep_small.jpg" alt="Come posso dormire con i tuoi occhi nella mente" title="Come posso dormire con i tuoi occhi nella mente"></a></li>
<li><a href="optical.jpg"><img src="optical_small.jpg" alt="Acqua ottica" title="Acqua ottica"></a></li>
<li><a href="ghosts.jpg"><img src="ghosts_small.jpg" alt="Loro ci vedono" title="Loro ci vedono"></a></li>
<li><a href="join.jpg"><img src="join_small.jpg" alt="This is love" title="This is love"></a></li>
<li><a href="hypergrid.jpg"><img src="hypergrid_small.jpg" alt="Iperspazio" title="Iperspazio"></a></li>
<li><a href="macchia.jpg"><img src="macchia_small.jpg" alt="Sono solo parole" title="Sono solo parole"></a></li>
<li><a href="tunnel.jpg"><img src="tunnel_small.jpg" alt="Verso il tunnel" title="Verso il tunnel"></a></li>
<li><a href="sea.jpg"><img src="sea_small.jpg" alt="Mar nero" title="Mar Nero"></a></li>
</ul>
<div style="clear:left">&nbsp;</div>
</div>
</div>
</div>
</body>
</html>




il file gallery.css :

html{margin:0;padding:0}
body{font: 12px arial,sans-serif;margin:0;padding: 0 5px}
img{border:0}
div#container{width:740px}
div#header img{float:left}
div#header h2{float:left;margin:24px 0 0 0;font-size:100%}
div#zoom{float:right;margin:0 0 5px 0;padding: 5px;border:1px solid #ccc}
div#zoom h3{margin:0;font-size:100%;color: #666;text-align:center}
div#zoom img{display:block;width:400px;height:400px}
div#minipics{margin-right:415px}
div#minipics ul{list-style-type: none;margin: 0;padding: 0}
div#minipics li{float:left;margin:0 5px 5px 5px;border:1px solid #ccc;padding: 3px}


e il file onpage.js

window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getElementsByTagName("a");
for(i=0;i<links.length;i++)
links.onclick=function(){Show(this);return(false)}
}

function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.title));
}




ora volevo fare in modo di rialzare il quadro dove le immagini verranno ingrandite rispetto alle miniature x ottenere una cosa del genere:


ma nn ci riesco..
voi potete aiutarmi?
 
Discussioni simili
Autore Titolo Forum Risposte Data
G Disposizione campi HTML e CSS 6
A Sviluppatore app a disposizione Offerte e Richieste di Lavoro e/o Collaborazione 0
M [PHP] Disposizione record nella pagina PHP 2
F Nuova disposizione del Garante della Privacy Google Analytics 0
C web agency crossnet a vostra disposizione Offerte e Richieste di Lavoro e/o Collaborazione 0
felino [Excel] Disposizione elementi per colonna Windows e Software 1
L Disposizione automatica immagini Javascript 2
D [Hosting] avere a disposizione piu connessioni contemporaneamente al db Hosting 3
M Webmaster a vostra disposizione, Offerte e Richieste di Lavoro e/o Collaborazione 0
f.quintaliani disposizione del testo con corel draw Webdesign e Grafica 4
S Access 2007 blocco visualizza riquadro MS Access 0
C Effetto zoom nello stesso riquadro dell'immagine (diverso dal solito) HTML e CSS 8
E come si ricrea in maschera la casella "CERCA" già inserita nel riquadro di spostamento record AC2010 MS Access 0
W Adattare immagini slideshow a riquadro predefinito Webdesign e Grafica 0
V Creare un riquadro che contenga immagine e descrizione HTML e CSS 5
V Immagini con riquadro bianco..come eliminarlo? Webdesign e Grafica 2
cerbero Riquadro a scelta multipla! Javascript 5
P riquadro Javascript 5
N Creazione sito web senza Partita IVA (Era: mettersi in regola) Leggi, Normative e Fisco 1
M Risolto Effettuare un redirect tramite DNS (Era: DNS Redirect) Domini 1
otto9due Immagine scompare ed esce testo, secondo click torna tutto com'era.. jQuery 7
T [PHP] Calcolo anzianità soggetti [era: Help me :( Esercizio per me impossibile] PHP 9
C Consiglio su studi futuri [era Diplomata disperata!] Discussioni Varie 1
S Wi-Fi Range Extender non funziona [Era Richiesta aiuto] ] Smartphone e tablet 13
ANDREA20 [PHP] syntax error, unexpected T_ELSE [era]urgentissimo] PHP 15
filippino Chiavi a corrispondenza inversa per i risultati organici? (Era: come NON farsi trovare con date chia SEO e Posizionamento 4
filomeni Contenuti nascosti e SEO (Era: display:none) SEO e Posizionamento 7
K Gestione memoria java [Era: heap] Java 1
Marcolotto Convertire PDF in Word [Era: PDF2Word] Discussioni Varie 1
F problema con "array_key_exist" (era: aiuto!!!) PHP 19
P Aggiornamento database [era: Banale...per chi non è inesperta come me... :(] PHP 4
G Intel 82562GT 10/100 non funziona su XP [era: ci sara una soluzione????] Reti LAN e Wireless 12
voldemort Cos'è il codice EPP? [Era: trasferimento dominio] Domini 1
A Navigazione jQuery [era: $(document).ready(function(){] jQuery 3
S Problemi di accesso al sito internet [era: Aiuto!!! problemi ad entrare nel mio sito con ie] Windows e Software 2
S Installazione mysql per Wordpress [era: installazioni prima di Wordpress, aiutatami!!!] WordPress 11
R Tabella database [era: Aiuto per php] PHP 34
R Estrarre dati da tabella mysql [era:Sto benedetto php] PHP 22
mirko.dagata Codice tributo 1040 [Era: F24] Leggi, Normative e Fisco 1
P [ASP] [Grauito] Ordinare categoria (era: reder by Cat) Offerte e Richieste di Lavoro e/o Collaborazione 1
V Script per distanza indirizzi [era: Script Php che non capisco se funzioni !] PHP 2
W Centrare immagine con Bootstrap [era: Centrare div con bootstrap] HTML e CSS 2
O Problema visualizzazione dati [era:Un problema] HTML e CSS 11
T Problema recupero dati da file [era: help script php] PHP 9
Frank10 Tagboard AJAX non funzionante [era: Solo a me questo problema penso..] phpBB 2
Frank10 [HTML] Editor WYSIWYG [era: E' possibile cambiare contenuti con un click?] HTML e CSS 8
novello88 Problema stampa CSS [Era: CSS print] HTML e CSS 1
V Cambiare il colore della pagina con js [era: html con js] Javascript 11
R Retribuzione per sito [era: HELP!! mi serve un consiglio] Discussioni Varie 2
N phpFlickr: ultime foto inserite [era: phpFlickr, ho letto la guida, ho bisogno di ...] PHP 3

Discussioni simili