Aiuto per CSS

Mer, 21/09/2011 - 15:07

#11

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

MCortese, ti ringrazio per la pazienza.
Le immagini che si aprono al passaggio del mouse dovrebbero aprirsi appunto in un solo spazio uguale a tutte, visto che le ho ridimensionate in modo da avere 200px.. (altezza che non supera i 200px ma che varia in base ad ognuna e comunque non superando i 200px).

Ho sì usato il codice ultimo <img src="empty.jpg" style="display: none; position: fixed;" id="myImg"></span></td> che in FF e altri browsers OpenSOurce si comporta bene, ma nel caso di IE sballa tutto dando immagini aperte solo sotto la tabella e facendo scorrere la pagina html anche oltre i 200px... tieni presente che tale codice lo usai qualcosa come 10 anni fa e pertanto sarà sì vecchio, ma ancora regge anche se i parametri non sono oggi quelli di una volta...
Le immagini in apertura sono statiche e se provo a mettere "absolute" IE apre sotto la tabella e a buona distanza, mentre FF apre normalmente e accanto al nome del soggetto ove il mouse passa. Quello è il punto che non riesco a far concordare tra i browsers.

Mer, 21/09/2011 - 15:25

#12

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Questo è il codice completo che usai allora, però era su una pagina singola e senza tabella:

<script type="text/javascript">
 
var offsetx = 100
var offsety = 05
var elementID="myImg"
 
function showImg(obj,image){
 
if(document.createElement){
 
if(!document.getElementById(elementID)){
newImg = document.createElement('IMG')
newImg.id = elementID
newImg.style.display="none"
newImg.style.position="absolute"
document.body.appendChild(newImg)
}
 
imageDisplay = document.getElementById(elementID)
imageDisplay.src = image
imageDisplay.style.display = 'block'
 
imageDisplay.style.left=obj.offsetLeft+offsetx
imageDisplay.style.top=obj.offsetTop+offsety
 
if(imageDisplay.offsetLeft<0){
imageDisplay.style.left=0
}
 
if(imageDisplay.offsetLeft+imageDisplay.offsetWidth>document.body.clientWidth){
imageDisplay.style.left=document.body.clientWidth - imageDisplay.offsetWidth-50
}
 
}
}
 
function hideImg(){
imageDisplay.style.display="none"
}
 
</script>
 
<style>
#myImg {
width:200px;
border:1px solid #5555aa;
}
 
</style>
 
</HEAD>
<BODY>
<a href="#null" onmouseover="showImg(this,'pic1.jpg')" onmouseout="hideImg()">link</a><br><br>
<a href="#null" onmouseover="showImg(this,'pic2.jpg')" onmouseout="hideImg()">link</a>
</BODY>
</HTML>

Logicamente aggiungendo una tabella sballa tutto... anche se è inserito all'interno della stessa. Inoltre bisogna tenere conto della famosa compatibilità con IE odierno...
Se lo provi, noti che ogni immagine (anche se non esistente, ma almeno c'è la cornice) apre ad una stessa altezza; nel mio caso attuale ciò non accade perché il tutto va a finire in fondo alla tabella.

Ven, 23/09/2011 - 15:03

#13

mcortese

(Moderatore)

Offline

Iscritto: 27/02/2009

Messaggi: 2918

Armeggiare con le proprietà "display" e "position" è un invito a nozze per l'incompatibilità tra browser!
Visto che l'immagine non deve comparire e sparire o spostarsi, lascia tutto immutato e imposta di volta in volta solo la proprietà "src" per cambiare la figura mostrata:

function showpic(url) {
	document.getElementById("myImg").src = url;
}
function hidepic() {
	document.getElementById("myImg").src = "empty.jpg";
}

Se le dimensioni sono fisse, dichiarale all'inizio:

<img src="empty.jpg" width="200" height="200" id="myImg">

Se vuoi vedere dove va a finire l'immagine anche quando è "vuota", aggiungi un bordino:

<style>
  #myImg { border: solid 1px; }
</style>

Seguendo questi consigli, già al caricamento avrai tutti gli elementi con la loro posizione e dimensione finali e potrai sperimentare un po' (2 colonne, 3 colonne, allineamenti, margini...). Passando col mouse sui link cambierà solo l'interno del quadrato 200x200 ma non quello che sta intorno.

Ven, 23/09/2011 - 22:27

#14

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Cercando, ho trovato qualcosa che fa al caso. Ora devo inserirlo in un css o una semplice tabella html, vista la compatibilità dei css per IE9...meglio ancora fare una pagina intera in jscript. (Inoltre fa anche il preload per cui c'è più certezza che le immagini siano mostrate correttamente...)

VEDI

Mar, 11/10/2011 - 10:15

#15

fareyes

(Monster)

Offline

Iscritto: 14/03/2011

Messaggi: 425

Bene, ho anche finito da un po' di tempo e, credetemi, è stata cosa pesante... ma per colpa di Kompozer che taglia il codice inserito a mano..!

Ad un certo punto mi sono accorto che dei tag che avevo inserito a mano e funzionavano correttamente, venivano levati se aprivo con Kompozer... in genere uso quel programma per fare prima a visionare mentre aggiungo, ma questa volta ho capito che sarà meglio evitarlo, come pure Amaya...tutta roba che inserisce codice non richiesto dall'utente o spezza quello esistente. Praticamente mi segava via un

e un
per cui ogni volta la pagina cambiava totalmente... cose da non credere! La cosa si è poi ripetuta sulla pagina index, per cui ho preso tempo ed ho voluto capire cosa accadeva, e infatti ho pescato il bug!

Ho avuto anche tempo di provare l'ultimo prodotto della Adobe MUSE (su windows soltanto) che sarà gratuito sino al marzo 2012, poi servirà una licenza (costosa), però anche quello ha delle pretese legate al fattore proprietario. Sinceramente non mi piace molto, anche perché pure lui pretende la costruzione di un sito con propri parametri (estensioni) e questo può rendere difficile a molti utenti inesperti certe azioni.

Home

About

Network ILDN

Social link