[CSS] Nascondere Testo e Mostrare Immagine?

04-07-2008, 14.29.54

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! ^^

**acsocmel** · 04-07-2008, 16.10.44

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

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.

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

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):

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

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

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

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>')

Discussione: [CSS] Nascondere Testo e Mostrare Immagine?

LinkBack

Strumenti discussione

Display

[CSS] Nascondere Testo e Mostrare Immagine?

Regole di scrittura