utilizzo di overflow-x(-y), max(min)height-width

28-12-2005, 00.27.22

salve,
vorrei sapere come si possono utilizzare al meglio le proprietà di overflow, max e min height e width.

Da quanto ho capito overflow stabilisce se devono essere presenti le barre di scorrimento, overflow-x e overflow-y stabiliscono rispettivamente le barre orizzontali e verticali.
Quello che non capisco e il limite di lunghezza o larghezza come viene stabilito. se fosse possibile utilizzarlo tipo overflow(500px) , ma non credo.

Poi volevo avere informazioni su max-width , max-height, min-width, min-height. Li ho cercati e trovati anche sul sito della w3c, ma a me sembrano non funzionare....

Il tutto mi serve per poter caricare un'immagine (tramite document.getElementById("Layer2").src=imageurl(obj .src);) e ridimensionarla.
A caricarla la carica correttamente, solo che non ne modifica le dimensioni.
Se imposto nel tag img le dimensioni, le immagini vengono ridimensionate a quelle dimensioni fisse.
Allora ho fissato solo la larghezza dell'immagine, così facendo pero' mi rimangono fuori le immagini "strette e lunghe" che mi sporgono dalla pagina perchè la loro dimensione in larghezza è stata ampliata...
ho provato senza successo a impostare max-height ma nulla.
mi servirebbe in alternativa un layer o div esterno oltre il quale l'immagine racchiusa non puo' andare. Oppure uno script che ridimensioni l'immagine...
Ho trovato qualcosa anche sull'attributo clip ma non ho ben capito di cosa si tratta.

Grazie

**funcool** · 28-12-2005, 10.48.19

Le proprietà che hai citato fanno parte del CSS e vengono utilizzate prevalentemente con il tag <div>.
Quelle max e min non funzionano con Internet Explorer, per questo che riesci a capire se le hai usate correttamente.

**dementialsite** · 28-12-2005, 10.58.32

Originalmente inviato da orion42

... Da quanto ho capito overflow stabilisce se devono essere presenti le barre di scorrimento, overflow-x e overflow-y stabiliscono rispettivamente le barre orizzontali e verticali.

overflow, overflow-x e overflow-y sono i tre stili che stabiliscono come debbano essere visualizzati i contenuti all'interno dell'elemento (di solito un DIV) se non dovessero starci nello spazio assegnato (non è proprio come hai detto tu sulle barre di scorrimento). Questi attributi possono assumere quattro valori:
- visible: il contenitore (il DIV di prima) si espanderà fino a far contenere eventuali oggetti più grandi dello spazio disponibile, anche se dovessi aver specificato determinate width e/o height
- scroll: il contenitore non viene mai espanso e le barre di scorrimento saranno sempre visibili, anche se non dovessero essere necessarie
- hidden: il contenitore non viene mai espanso, ma eventuali contenuti che "sbordano" non saranno visibili
- auto: identico a scroll, ma visualizza le barre di scorrimento solo se necessario

Originalmente inviato da orion42

Quello che non capisco e il limite di lunghezza o larghezza come viene stabilito. se fosse possibile utilizzarlo tipo overflow(500px) , ma non credo. ...

Come in parte già detto, per specificare un limite di larghezza o altezza vanno specificati anche gli attributi width e height

Originalmente inviato da orion42

... Poi volevo avere informazioni su max-width , max-height, min-width, min-height. Li ho cercati e trovati anche sul sito della w3c, ma a me sembrano non funzionare....

Quegli attributi ti consentono di specificare una larghezza o altezza minima e una massima per qualche elemento, ma non è che non funzionino... è Internet Explorer che non li supporta (usi quello per i test, vero?)

Originalmente inviato da orion42

... Il tutto mi serve per poter caricare un'immagine (tramite document.getElementById("Layer2").src=imageurl(obj .src);) e ridimensionarla.
A caricarla la carica correttamente, solo che non ne modifica le dimensioni.
Se imposto nel tag img le dimensioni, le immagini vengono ridimensionate a quelle dimensioni fisse.
Allora ho fissato solo la larghezza dell'immagine, così facendo pero' mi rimangono fuori le immagini "strette e lunghe" che mi sporgono dalla pagina perchè la loro dimensione in larghezza è stata ampliata...

Quello che ti servirebbe è calcolare quali sono le immagini che "sbordano", potresti tentare questa strada:

Codice HTML:

<HTML>
<HEAD>
<TITLE>Immagine in un box</TITLE>
<STYLE>
/* specifica qui larghezza e altezza massima del box */
DIV.img_box { width:...; height:...; border:solid 1px #000000; padding:0 }
DIV.img_box IMG { margin:0 }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
/**
parametri:
   src - percorso dell'immagine
   w - larghezza originale dell'immagine
   h - altezza originale dell'immagine
*/
function loadImage (src, w, h)
{
   // questi valori sono gli stessi specificati nel tag <STYLE> per il DIV
   var bw = ...
   var bh = ...
   
   var rw = bw / w
   var rh = bh / h
   if (rw <= rh)
      document.write ('<IMG SRC="' + src + '" WIDTH="' + Math.round (w * rw) + '" HEIGHT="' + Math.round (h * rw) + '">')
   else
      document.write ('<IMG SRC="' + src + '" WIDTH="' + Math.round (w * rh) + '" HEIGHT="' + Math.round (h * rh) + '">')
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="box1" CLASS="img_box">
<SCRIPT LANGUAGE="JavaScript">
loadImage ("immagine.jpg", 320, 240);
</SCRIPT>
</DIV>
</BODY>
</HTML>

L'immagine ti comparirà così in un box, sara ingrandita o ridotta ma mai deformata ma ovviamente se non sarà conforme al box che la ospita ci sarà dello spazio all'interno del DIV...

Sappiami dire se così funziona... stammi bene...

28-12-2005, 13.13.55

sto leggendo il tuo codice, ma non mi convince in partenza...

bw e bh sono le dimensioni del div ?

function loadImage (src, w, h)
non dovrebbe essere:

function loadImage (id, src, w, h)?

**dementialsite** · 28-12-2005, 13.20.48

Originalmente inviato da orion42

sto leggendo il tuo codice, ma non mi convince in partenza...

bw e bh sono le dimensioni del div ?

Sì, vengono rilevate dalle specifiche di stile... se però non dovesse funzionare prova a scrivere direttamente gli stessi valori che ci hai specificato.

Originalmente inviato da orion42

function loadImage (src, w, h)
non dovrebbe essere:

function loadImage (id, src, w, h)

Vero, mi sono dimenticato di modificare anche lì... scusami, adesso correggo...

Stammi bene...

28-12-2005, 13.22.24

per me dovrebbe essere :

var rw = w / bw
var rh = h / bh

cosi facendo vengono valori<1 che permettono, scegliendo il + piccolo con if(rw<rh) di ridimensionare width e height...

[edit]
ho controllato, mi sn sbagliato io, adesso lo provo

ci andrebbe messo anche il caso in cui rw=rh
se pre es l'immagine è 400x200 e lo spazio è 200x100 viene sempre 0,5 .
io setterei direttamente minore uguale
if (rw<=rh)

e poi dovrei mettere un if su rh e rw per ridurle solo e non ingrandirle, dopo lo posto, dovrei farcela da solo.

cmq il mio problema è un altro:

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>

<script>
function changeLayerImage(obj)	{
		dimensioni(Layer2);
		upDate(obj);
}

function upDate(obj)	{
//performs switch of image backgrounds into viewer and updates display
document.getElementById("Layer2").src=imageurl(obj.src);
}

function imageurl(str){
 var i = str.lastIndexOf(".");
 return str.substr(0, i-6) + str.substr(i);
}

function dimensioni(Layer2){
var wor = document.getElementById("Layer2").width
var hor = document.getElementById("Layer2").height
//wimg=wor
//himg=hor
//   if (wimg>530){
//      while(wimg<530){
//      wimg=wimg*0.8;
//      }
//   }
//document.getElementById("dimant").innerHTML="dimensioni anteprima:"+wimg+"x"+himg+"px";  
document.getElementById("dimimg").innerHTML="dimensioni immagine:"+wor+"x"+hor+"px"; 
}
</script>
</head>

<body>
<br>
<div id="dimimg">dim img</div>
<div id="dimant">dim ant</div><br>
<img id="menu1" alt="m42 ed m43,"
 onClick="changeLayerImage(this)" 
 style="  z-index:1; border: 1px  solid #FFCC33; filter: Alpha(Opacity=80); cursor: hand;" 
		src="../images/foto/orione/m43-n1977-mid_small.jpg" width="100" height="67" >
<br>
 <img src="../images/foto/andromeda/m31.jpg" alt="Viewer"  id="Layer2" style="z-index:2;   background-repeat:no-repeat; background-position:center;  border:2px solid #4040FF; margin-top:4px"></a> 
	
</body>
</html>

Questa è la pagina su cui dovrei implementare il controllo delle dimensioni.
cliccando sulla miniatura dell'immagine uno script toglie "_small" dal nome e la imposta come src del Layer2.
dopo di che cerco di prendergli le dimensioni e scriverle in un altro layer, ma non so perchè me le prende dell'immagine prima che mi si carica l'immagine.
Per vedere le dimensioni corrette devo farci click due volte. in modo che prende le dimensioni dell'immagine prima che è sempre lei stessa.
Credo di sbagliare a posizionare temporalmente le istruzioni o a non aggiornare le variabili....

**dementialsite** · 28-12-2005, 13.39.36

Originalmente inviato da orion42

... [edit]
ho controllato, mi sn sbagliato io, adesso lo provo ...

Meno male, stavo giusto per farti la "ramanzina" :-D

Originalmente inviato da orion42

... ci andrebbe messo anche il caso in cui rw=rh
se pre es l'immagine è 400x200 e lo spazio è 200x100 viene sempre 0,5 .
io setterei direttamente minore uguale
if (rw<=rh)

Non è che cambi molto, perché alla fine moltiplichi per lo stesso numero, sia esso rw o rh, comunque puoi fare anche così...

Ah, quello script prevede anche la possibilità che un'immagine sia ingrandita invece che ridotta: trovi una prova dello script su questa pagina http://dementialsite.altervista.org/...img/boximg.htm

Stammi bene...

28-12-2005, 13.46.18

ho editato, se puoi dammi consiglio, ne ho bisogno...

ma se sono 2 valori uguali entra lo stesso con < ?
non c'e' bisogno di <= ?

ps.

ho messo online l'html di prima alla pagina :

http://www.orion42.altervista.org/pr...o_immagine.htm

cosi' si capisce meglio l'errore

ads hai modificato il tuo script!
Con questo adesso ci faccio poco :(

spero tu abbia capito il mio problema, non so come intergrarlo !

Discussione: utilizzo di overflow-x(-y), max(min)height-width

LinkBack

Strumenti discussione

Display

utilizzo di overflow-x(-y), max(min)height-width

Regole di scrittura