PDA

View Full Version : Come visualizzare sul browser la descrizione di un link?


..::{I AnOnImO I}::..
27-12-2002, 18:24
Come visualizzare sul browser la descrizione di un link?

Questo il Codice:

<A HREF="www.html.it" ' title='"Il portal del web publishing italiano. Guide e tutorial per webmaster.">HTML.it</A>

ma per far si che succeda con un'immagine?

<style type="text/css">
#supertext {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;
}
</style>

Nel secondo caso si possono cambiare colore del testo, dello sfondo e dei bordi?

:hello:

the_al
28-12-2002, 00:52
allora ho trovato qualcosa che forse ti puo interessare
e' uno javascript combinato con i css.

trovi tutto nel file txt (che salvandolo .html diventa un esempio)

per applicarlo alla tua pagina

aggiungi al style gia definito questa classe

.navtext {
text-align:left;
width:230px;
font:normal 7pt tahoma;
border-width:2px;
border-style:outset;
border-color:white;
background-color:#000000;
layer-background-color:red;
color:white;
}


poi sempre len <head> linki il file js esterno (e' abb. lungo)

per linkarlo basta fare

<script language="JavaScript" src="script.js"></script>


e po basta attribuire all' <a> gli attributi riportati nell'esempio, ovvero

<a href="http://" onMouseOver="writetxt('Link. Descrizione del link.')" onMouseOut="writetxt(0)"><img src="prova.gif" width="100" height="50" border="0"></a>


per chiarimenti chiedi pure :elfhat:

the_al
28-12-2002, 00:53
ups ho dimenticato il file allegato ^^

:hello:

..::{I AnOnImO I}::..
28-12-2002, 13:59
preavviso distrastri :D

the_al
29-12-2002, 13:36
lo immaginavo :D

comunque se non e' necessario al 100% l'utilizzo di una descrizione cosi la tralasci :elfhat:

..::{I AnOnImO I}::..
29-12-2002, 13:46
gia tralscio ke mejo :D

the_al
29-12-2002, 14:16
:D

comunque posto lo stesso una guida accurata per usarla. allora ..

per prima cosa ci serve lo javascript, questo


<script language="JavaScript">
var dofade=false;
var center=false;
var centertext=false;

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false;
var IE4 = (document.all && !document.getElementById)? true : false;
var IE5 = (document.getElementById && document.all)? true : false;
var NS6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var W3C = (document.getElementById)? true : false;
var w_y, w_x, navtxt, boxheight, boxwidth;
var ishover=false;
var isloaded=false;
var ieop=0;
var op_id=0;

function getwindowdims(){
w_y=(NS4||NS6)? window.innerHeight : (IE5||IE4)? document.body.clientHeight : 0;
w_x=(NS4||NS6)? window.innerWidth : (IE5||IE4)? document.body.clientWidth : 0;
}

function getboxwidth(){
if(NS4)boxwidth=(navtxt.document.width)? navtxt.document.width : navtxt.clip.width;
if(IE5||IE4)boxwidth=(navtxt.style.pixelWidth)? navtxt.style.pixelWidth : navtxt.offsetWidth;
if(NS6)boxwidth=(navtxt.style.width)? parseInt(navtxt.style.width) : parseInt(navtxt.offsetWidth);
}

function getboxheight(){
if(NS4)boxheight=(navtxt.document.height)? navtxt.document.height : navtxt.clip.height;
if(IE4||IE5)boxheight=(navtxt.style.pixelHeight)? navtxt.style.pixelHeight : navtxt.offsetHeight;
if(NS6)boxheight=parseInt(navtxt.offsetHeight);
}

function movenavtxt(x,y){
if(NS4)navtxt.moveTo(x,y);
if(W3C||IE4){
navtxt.style.left=x+'px';
navtxt.style.top=y+'px';
}}

function getpagescrolly(){
if(NS4||NS6)return window.pageYOffset;
if(IE5||IE4)return document.body.scrollTop;
}

function getpagescrollx(){
if(NS4||NS6)return window.pageXOffset;
if(IE5||IE4)return document.body.scrollLeft;
}

function writeindiv(text){
if(NS4){
navtxt.document.open();
navtxt.document.write(text);
navtxt.document.close();
}
if(W3C||IE4)navtxt.innerHTML=text;
}

function writetxt(text){
if(isloaded){
if(text!=0){
ishover=true;
if(NS4)text='<div class="navtext">'+((centertext)?'<center>':'')+text+((centertext)?'</center>':'')+'</div>';
writeindiv(text);
getboxheight();
if((W3C || IE4) && dofade){
ieop=0;
incropacity();
}}else{
if(NS4)navtxt.visibility="hide";
if(IE4||W3C){
if(dofade)clearTimeout(op_id);
navtxt.style.visibility="hidden";
}
writeindiv('');
ishover=false;
}}}

function incropacity(){
if(ieop<=100){
ieop+=7;
if(IE4 || IE5)navtxt.style.filter="alpha(opacity="+ieop+")";
if(NS6)navtxt.style.MozOpacity=ieop/100;
op_id=setTimeout('incropacity()', 50);
}}

function moveobj(evt){
if(isloaded && ishover){
margin=(IE4||IE5)? 1 : 23;
if(NS6)if(document.height+27-window.innerHeight<0)margin=15;
if(NS4)if(document.height-window.innerHeight<0)margin=10;
//mx=(NS4||NS6)? evt.pageX : (IE5||IE4)? event.clientX : 0;
//my=(NS4||NS6)? evt.pageY : (IE5||IE4)? event.clientY : 0;
if (NS4){
mx=evt.pageX
my=evt.pageY
}
else if (NS6){
mx=evt.clientX
my=evt.clientY
}
else if (IE5){
mx=event.clientX
my=event.clientY
}
else if (IE4){
mx=0
my=0
}

if(NS4){
mx-=getpagescrollx();
my-=getpagescrolly();
}
xoff=(center)? mx-boxwidth/2 : mx+5;
yoff=(my+boxheight+30-getpagescrolly()+margin>=w_y)? -15-boxheight: 30;
movenavtxt( Math.min(w_x-boxwidth-margin , Math.max(2,xoff))+getpagescrollx() , my+yoff+getpagescrolly());
if(NS4)navtxt.visibility="show";
if(W3C||IE4)navtxt.style.visibility="visible";
}}

if(NS4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moveobj;
window.onload=function(){
navtxt=(NS4)? document.layers['navtxt'] : (IE4)? document.all['navtxt'] : (W3C)? document.getElementById('navtxt') : null;
getboxwidth();
getboxheight();
getwindowdims();
isloaded=true;
if((W3C || IE4) && centertext)navtxt.style.textAlign="center";
if(W3C)navtxt.style.padding='4px';
if(IE4 || IE5 && dofade)navtxt.style.filter="alpha(opacity=0)";
}
window.onresize=getwindowdims;
</script>

che va inserito nell'<head> .

poi dobbiamo creare una classe in css (che descrive lo stile della descrizione del link), questo

<style type="text/css">
.navtext {
text-align:left;
width:230px;
font:normal 7pt tahoma;
border-width:2px;
border-style:outset;
border-color:white;
background-color:#000000;
layer-background-color:red;
color:white;
}
</style>

come vediamo nell'esempio la classe css ha il nome "navtext" .

la prossima cosa da fare e' inserire questo dopo il tag <body>

<div id="navtxt" class="navtext" style="position:absolute; top:-100px; left:0px; visibility:hidden"></div>


fatto. ora possiamo inserire come attributo nel tag <a> i valori per fare in modo che appaia la descrizione .

<a href="http://www.igz.it" onMouseOver="writetxt('Link. Descrizione del link.')" onMouseOut="writetxt(0)">LINK</a>


finito. :hello:

..::{I AnOnImO I}::..
29-12-2002, 20:32
prima risolviamo questo di problema :D (http://forum.igz.it/showthread.php?s=&threadid=79526)