[CSS] Nascondere Testo e Mostrare Immagine?

Printable View

04-07-2008, 14.29.54

[CSS] Nascondere Testo e Mostrare Immagine?

Ciao a tutti, volevo sapere come posso nascondere il testo e mostrare l'immagine quando c'è l'a:hover...ex:
TESTO [no a.hover - l'img nn ce]
===============================
IMMAGINE [si a.hover - il testo non ce]
Come posso fare?

Codice PHP:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Nuova pagina 3</title> <style> .img-testo a { display: visible; } .img-testo a:hover { background-image: url('accept.png'); background-repeat: no-repeat; position: absolute; height: 100%; width: 100% } .img-testo p a:hover { display: none; } </style> </head> <body> <span class="img-testo"><a href="ù"><p>Nome IMG</p></a></span> </body> </html>

Grazie 1000...ciao Davide! ^^
04-07-2008, 16.10.44
acsocmel

non sei lontano ... essendo all'opposto
il <p> va di fuori e lo <span> va dentro all' <a>
e poi manca poco
04-07-2008, 16.30.13

Se mai è così:

Codice PHP:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Nuova pagina 3</title> <style> .img-testo a:hover { background-image: url('accept.png'); background-repeat: no-repeat; position: absolute; height: 100%; width: 100% } .img-testo p a:hover { display: none; } </style> </head> <body> <span class="img-testo"><p><a href="#">Nome IMG</a></p></span> </body> </html>

Ora il testo scompare..ma l'immagine non appare!
Ciao! :)..e Grazie! ;)
05-07-2008, 08.42.57

Se ti accontenti dell'immagine sovrapposta al testo ( o a un altra immagine ): http://host.sonspring.com/hoverbox/

Comunque, prova così:

Codice:

<style> .img a:hover { color:transparent; background-image: url('immagine.png'); background-repeat: no-repeat; position: absolute; height: 100%; width: 100%; } </style></head><body><p><span class="img"><a href="#">Nome IMG</a></span></p>

.
05-07-2008, 12.09.41

No..il testo rimane...invece deve SCOMPARIRE! :D
Ciao! ^^
05-07-2008, 18.23.03

Citazione:

Originalmente inviato da sIM

No..il testo rimane...invece deve SCOMPARIRE! :D
Ciao! ^^

. . Quello funziona su Firefox, il problema è IExplorer che non riconosce color transparent. :roll: Adesso ho scritto un CSS differente ( una variante di quello che utilizzo nella mia Home, dovrebbe andare bene per tutti i browser anche se ho verificato solo su Firefox 3 e IExplorer 6.0. Attenzione IExplorer deve lavorare in Quirks mode ( backcompat) quindi il DOCTYPE da non modificare. Prova il codice e dicci se va bene, c'è solo un dettaglio da sistemare per IE che riguarda i link.

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <style type="text/css"> #box a.del, #box a.del:visited { width:331px; height:120px; color:#00f; text-decoration:none; } #box a.del:hover, #box a.del:active, #box a.del:focus { width:331px; height:120px; text-decoration:none; color:transparent; filter:alpha(opacity=00); } #box a .hte, #box a .hte:visited { position:absolute; width:0px; height:0px; top:-3px; left:-3px; border:0px; } #box a.del:hover .hte, #box a.del:active .hte, #box a.del:focus .hte { display:block; position:absolute; top:11px; left:11px; width:331px; height:120px; border: 1px solid #00f; } </style> </head> <body> <div id='box'><a class='del' href='#'><font style='font-size:49px;'> TESTO DA <br>NASCONDERE</font><img class='hte' src='immagine.png'></a>

Spiegazione: color:transparent; è istruzione per il solo Firefox, mentre filter:alpha(opacity=00); è l'istruzione per il solo IExplorer.
07-07-2008, 15.04.05

Allora io ho trovato questo codice in JavaScript...ma non ho capito bene come funziona...perchè:
tooltip.js

Codice PHP:

/* Simple Image Trail script- By JavaScriptKit.com Visit http://www.javascriptkit.com for this script and more This notice must stay intact */ var w=1 var h=1 if (document.getElementById || document.all) document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:4px solid #f8f8f8;background:#cccccc;"><img id="ttimg" src="img/s.gif" /></div>') function gettrailobj() { if (document.getElementById) return document.getElementById("trailimageid").style else if (document.all) return document.all.trailimagid.style } function truebody() { return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function hidetrail() { document.onmousemove="" document.getElementById('ttimg').src='/img/s.gif' gettrailobj().visibility="hidden" gettrailobj().left=-1000 gettrailobj().top=0 } function showtrail(width,height,file) { if(navigator.userAgent.toLowerCase().indexOf('opera') == -1) { w=width h=height // followmouse() document.getElementById('ttimg').src=file document.onmousemove=followmouse gettrailobj().visibility="visible" gettrailobj().width=w+"px" gettrailobj().height=h+"px" } } function followmouse(e) { if(navigator.userAgent.toLowerCase().indexOf('opera') == -1) { var xcoord=20 var ycoord=20 if (typeof e != "undefined") { xcoord+=e.pageX ycoord+=e.pageY } else if (typeof window.event !="undefined") { xcoord+=truebody().scrollLeft+event.clientX ycoord+=truebody().scrollTop+event.clientY } var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15 var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight) if (xcoord+w+3>docwidth) xcoord=xcoord-w-(20*2) if (ycoord-truebody().scrollTop+h>truebody().clientHeight) ycoord=ycoord-h-20; gettrailobj().left=xcoord+"px" gettrailobj().top=ycoord+"px" } }

pagina.html

Codice PHP:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Nuova pagina 1</title> <script language="javascript" src="tooltip.js"></script> </head> <body> <a href="#" onmouseover="showtrail(400,300,'via%20dei%20Mari%20371.png');" onmouseout="hidetrail();">via dei Mari, 375</a> <p></p> </body> </html>

Ma quando vado nel collegamento spunta l'img con la X come se fosse errata la posizione..perchè?
Eppure tutti i file si trovano in "Documenti" sul mio PC...
Come mai si vede la X?
Grazie 1000...ciao Davide! ^^
08-07-2008, 12.41.23

Citazione:

Originalmente inviato da sIM

Ma quando vado nel collegamento spunta l'img con la X come se fosse errata la posizione..perchè?
Eppure tutti i file si trovano in "Documenti" sul mio PC...
Come mai si vede la X?

Modifica questi: img/s.gif - /img/s.gif - via%20dei%20Mari%20371.png

in: images/s.gif - images/s.gif - images/via_dei_Mari_371.png

e sposta tutte le immagini correttamente rinominate nella cartella "images"..
08-07-2008, 14.39.04

Ok..Grazie..ma ora ho questo problema (si vedono gli <hr /> e il testo):
http://i25.tinypic.com/o9k9zb.png
Perchè? Invece nel sito da dove l'ho preso:
http://www.sxc.hu/browse.phtml?f=search&txt=php&w=1
Non si verifica qst problema! :(... (Basta andare con il mouse senza click su un img)
Grazie 1000...ciao Davide! ^^
08-07-2008, 22.26.40

Citazione:

Originalmente inviato da sIM

ora ho questo problema (si vedono gli <hr /> e il testo):

Perchè? Invece nel sito da dove l'ho preso:
http://www.sxc.hu/browse.phtml?f=search&txt=php&w=1
Non si verifica qst problema! :(

Questo javaScript per il tooltip non ha la capacità di rendere le immagini trasparenti, quindi non dipende dallo script ma da quello che hai scritto nel resto della tua pagina. Forse sono presenti altri Script, filtri HTML o frammenti del CSS incompatibili oppure dei <div> con z-index o posizione assoluta successivi al testo linkato e ai <hr> - che a questo punto dovresti togliere. A meno che, non hai utilizzato img PNG-24 semitrasparente ( ma non credo )....
08-07-2008, 23.01.39

E quindi..la soluzione?
Ciao! ^^
09-07-2008, 11.24.15

Citazione:

E quindi..la soluzione?

"Tooltip.js" dovrebbe essere corretto, posta la pagina "xxxx.html" - se no, come potrei scoprire dov'è l'errore ? Almeno un link!
09-07-2008, 13.06.49

http://www.creativesims.ilbello.com/...id=catid&cat=2
Ciaooo! :)
PS. e Grazie! ;)
09-07-2008, 23.33.46

Citazione:

Originalmente inviato da sIM

http://www.creativesims.ilbello.com/...id=catid&cat=2
Ciaooo! :)
PS. e Grazie! ;)

OK! Cambia questa parte del tooltip.js:

Codice:

if (document.getElementById || document.all)document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px; border:4px solid #f8f8f8;background-color:#cccccc;"> <img id="ttimg" src="images/s.gif" /></div>')

In:

Codice:

if (document.getElementById || document.all)document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px; border:4px solid #f8f8f8;background-color:#cccccc;z-index:1;"> <img id="ttimg" src="images/s.gif" /></div>')