cursore MANINA sopra un'area sensibile

**lelietta** · 26-08-2003, 16:24

Ciao,
ho creato un'area sensibile (area shape) su un'immagine che non ha nessuna caratteristica particolare; normalmente - passando col mouse sull'area sensibile - viene visualizzata la manina, mentre a me il cursone rimane invariato, ovvero la classica freccia.(se clicco però il link funziona..!)

come faccio a far venire fuori la manina, quando ci passo sopra col mouse? qualcuno mi sa aiutare? grazie! Lelia

ecco il codice della pagina:

<html>
<head>
<link rel="Stylesheet" href="style.css">
<script language="JavaScript" src="js.js"></script>
<title>KSearch - recruiting personale</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Ricerca personale">
<meta name="keywords=" content="dirigente">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" background="img/sf_bande.gif" height="20%"></td>
</tr>
<tr>
<td align="center" valign="middle">[img]img/logo_big.gif[/img]</td>
</tr>
<tr>
<td align="center" valign="bottom" style="padding:10" background="img/sf_bande.gif" height="20%">Chi siamo | Ricerche in corso | Contatti </td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="2,1,138,52" href="pages/aziende.html">
<area shape="rect" coords="629,203,781,258" href="pages/candidati.html">
</map>
</body>
</html>

AtomSurfer · 26-08-2003, 16:42

Se il link era in alto a sinistra e in basso a destra a me la manina spunta (ho provato con ie6 e netscape6).
Boh...

**Francis87** · 26-08-2003, 17:55

prova se no a mettere nello stile

area
{
CURSOR: hand;
}

**lelietta** · 27-08-2003, 09:20

niente, anche io lo sto guardando con explorer 6, ma non mi fa vedere la manina..! non mi è mai capitato!

ho inserito anche il cursor hand nello style, ma niente..

<html>
<head>
<link rel="Stylesheet" href="style.css">
<script language="JavaScript" src="js.js"></script>
<script language="JavaScript">
window.resizeTo(800,600);
window.moveTo((screen.width-800)/2,(screen.height-600)/2);
</script>
<style>
area
{
CURSOR: hand;
}
</style>
<title>KSearch - recruiting personale</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Ricerca personale">
<meta name="keywords=" content="dirigente">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" background="img/sf_bande.gif" height="20%"></td>
</tr>
<tr>
<td align="center" valign="middle">[img]img/logo_big.gif[/img]</td>
</tr>
<tr>
<td align="center" valign="bottom" style="padding:10" background="img/sf_bande.gif" height="20%">Chi siamo | Ricerche in corso | Contatti </td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="2,1,138,52" href="pages/aziende.html">
<area shape="rect" coords="629,203,781,258" href="pages/candidati.html">
</map>
</body>
</html>

**iguane** · 27-08-2003, 10:38

Originariamente inviato da lelietta
niente, anche io lo sto guardando con explorer 6, ma non mi fa vedere la manina..! non mi è mai capitato!

ho inserito anche il cursor hand nello style, ma niente..

<html>
<head>
<link rel="Stylesheet" href="style.css">
<script language="JavaScript" src="js.js"></script>
<script language="JavaScript">
window.resizeTo(800,600);
window.moveTo((screen.width-800)/2,(screen.height-600)/2);
</script>
<style>
cu
{
CURSOR: hand;
}
</style>
<title>KSearch - recruiting personale</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Ricerca personale">
<meta name="keywords=" content="dirigente">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" background="img/sf_bande.gif" height="20%"></td>
</tr>
<tr>
<td align="center" valign="middle">[img]img/logo_big.gif[/img]</td>
</tr>
<tr>
<td align="center" valign="bottom" style="padding:10" background="img/sf_bande.gif" height="20%">Chi siamo | Ricerche in corso | Contatti </td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="2,1,138,52" href="pages/aziende.html">
<area shape="rect" coords="629,203,781,258" href="pages/candidati.html">
</map>
</body>
</html>

Ho provato con IE6.0 e mi funziona,
comunque prova a spostare la mappatura dell'immagine:

<map name="Map">
<area shape="rect" coords="2,1,138,52" href="pages/aziende.html">
<area shape="rect" coords="629,203,781,258" href="pages/candidati.html">
</map>

sopra il richiamo dell'immagine stessa

<td align="center" valign="middle">[img]img/logo_big.gif[/img]

se neanche così fuinziona prova in questo modo

<style>
.manina {
CURSOR: hand;
}
</style>

<map name="Map" class="manina">
<area shape="rect" coords="2,1,138,52" href="pages/aziende.html">
<area shape="rect" coords="629,203,781,258" href="pages/candidati.html">
</map>

fammi sapere

**lelietta** · 27-08-2003, 10:57

iguane,
ho fatto come mi dici e in effetti la manina compare, il probl è che compare su tutta l'immagine e non solo sulle due aree.. sai aiutarmi ancora?

se ti occorre ti riporto il codice
grazie!

<html>
<head>
<link rel="Stylesheet" href="style.css">
<script language="JavaScript" src="js.js"></script>
<script language="JavaScript">
window.resizeTo(800,600);
window.moveTo((screen.width-800)/2,(screen.height-600)/2);
</script>
<style>
.manina { CURSOR: hand; }
</style>
<title>KSearch - recruiting personale</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Ricerca personale">
<meta name="keywords=" content="dirigente">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" background="img/sf_bande.gif" height="20%"></td>
</tr>
<tr>
<td align="center" valign="middle" class="manina">
<map name="Map" class="manina">
<area shape="rect" coords="2,1,138,52" href="pages/aziende.html">
<area shape="rect" coords="629,203,781,258" href="pages/candidati.html">
</map>
[img]img/logo_big.gif[/img]</td>
</tr>
<tr>
<td align="center" valign="bottom" style="padding:10" background="img/sf_bande.gif" height="20%">Chi siamo | Ricerche in corso | Contatti </td>
</tr>
</table>
</body>
</html>

**iguane** · 27-08-2003, 11:01

Sposta la chiamata alla classe in questo modo:

<map name="Map">
<area class="manina" shape="rect" coords="2,1,138,52" href="pages/aziende.html">
<area class="manina" shape="rect" coords="629,203,781,258" href="pages/candidati.html">
</map>

In questo modo dovrebbe comparire solo sulle due area sopra.
Siccome però la cosa mi sembra strana mi posti il cosice del foglio stile?

**lelietta** · 27-08-2003, 11:12

dunque, prima la manina compariva perchè per errore avevo lasciato la classe manina nel td che contiene l'immagine. (lo vedi nel codice che ti ho mandato prima)
me ne sono accorta, e nel momento in cui ho tolto la classe dal td e l'ho messa solo all'area shape non funziona.

sai che quasi quasi raggiro il problema e faccio questa schermatina con flash?

che ne dici? tanto è una home page-intro.. così ci aggiungo un effetto dissolvenza e via andare..

ah, per tua curiosità personale ecco il css.

body { font-family: Verdana; font-style: normal; font-size: 11px; font-weight : normal; color : #000000;
background-color: #ffffff;
scrollbar-face-color: #CDCDB3;
scrollbar-shadow-color: #AC8781;
scrollbar-highlight-color: #6B4D05;
scrollbar-3dlight-color: #AC8781;
scrollbar-darkshadow-color: #6B4D05;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #612C23;
overflow-x: hidden;
overflow-y: auto;
cursor:default;}DBD69D

.line_a {background-color : #19315C;}
.line_left {background-color: #3a6fa5}

a { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #061836; font-weight : none;}
a:hover { text-decoration:none; font-family: Verdana; font-size: 11px; color: #ffffff; font-weight : none;}

.testo { text-decoration:none; font-family: Verdana; font-size: 10px; color: #061836; font-weight : none; background-color: CDCDB3; border-right : 1pt solid #252424; border-bottom : 1pt solid #252424;
background-image: url(img/sf_k.gif); background-repeat:no-repeat;}
A.testo:link { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #061836; font-weight : none;}
A.testo:active { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #061836; font-weight : none;}
A.testo:visited { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #061836; font-weight : none;}
A.testo:hover { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #3A4051; font-weight : none;}

.testo_bianco { text-decoration:none; font-family: Verdana; font-size: 10px; color: #ffffff; font-weight : none;}
A.testo_bianco:link { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #ffffff; font-weight : none;}
A.testo_bianco:active { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #ffffff; font-weight : none;}
A.testo_bianco:visited { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #ffffff; font-weight : none;}
A.testo_bianco:hover { text-decoration:underline; font-family: Verdana; font-size: 11px; color: #CDCDB3; font-weight : none;}

.titolo { text-decoration:none; font-family: Verdana; font-size: 12px; color: #612C23; font-weight : bold;}

.border_nero {
border-left : 1pt solid #252424;
border-right : 1pt solid #252424;
border-bottom : 1pt solid #252424;
font: 11px/11px Verdana ;color: #ffffff; text-decoration: none; }

.sf_left {
background-image: url(img/left_sf.jpg);
border-left : 1pt solid #252424;
border-right : 1pt solid #252424;
font: 11px/11px Verdana ;color: #ffffff; text-decoration: none; }

.txtform
{
COLOR: #646464;
FONT-FAMILY: Verdana, Arial, Helvetica;
FONT-SIZE: 10px
}
.txtaz
{
COLOR: #374e77;
FONT-FAMILY: Verdana, Arial, Helvetica;
FONT-SIZE: 10px
}

**iguane** · 27-08-2003, 11:20

Originariamente inviato da lelietta
dunque, prima la manina compariva perchè per errore avevo lasciato la classe manina nel td che contiene l'immagine. (lo vedi nel codice che ti ho mandato prima)
me ne sono accorta, e nel momento in cui ho tolto la classe dal td e l'ho messa solo all'area shape non funziona.

sai che quasi quasi raggiro il problema e faccio questa schermatina con flash?

che ne dici? tanto è una home page-intro.. così ci aggiungo un effetto dissolvenza e via andare..

ah, per tua curiosità personale ecco il css.

body { font-family: Verdana; font-style: normal; font-size: 11px; font-weight : normal; color : #000000;
background-color: #ffffff;
scrollbar-face-color: #CDCDB3;
scrollbar-shadow-color: #AC8781;
scrollbar-highlight-color: #6B4D05;
scrollbar-3dlight-color: #AC8781;
scrollbar-darkshadow-color: #6B4D05;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #612C23;
overflow-x: hidden;
overflow-y: auto;
cursor:default;}DBD69D

togli la riga in grassetto e lo stile che ti avevo postato prima ora non serve più e vedrai che funziona tutto correttamente.
Riguardo al flash non farlo troppo pesante però io mi stufo se devo aspettare un pò per magari vedere un animazione neanche tanto carina.

**lelietta** · 27-08-2003, 12:28

funziona, grazie!!!!

Discussione: cursore MANINA sopra un'area sensibile

Strumenti discussione

Ricerca discussione

Visualizza

cursore MANINA sopra un'area sensibile

ottimo!

Permessi di invio