zona cliccabile

**luigi45** · 01-11-2014, 11:28

Ho inserito un'immagine di sfondo al centro con css in questo modo:
sul lato destro dell'immagine ci è una stella di circa 100/150px

#fondocinque {
font-family:MyriadProRegular;
position:relative;
background:url(../images/fondoquattro.jpg);
background-repeat:no-repeat;
width:980px;
height:1386px;
}

su questa immagine vorrei che fosse cliccabile per l'invio ad altra pagina solo la stella che si trova in alto a destra.
come posso creare creare questo?
Grazie Luigi

**Prill** · 01-11-2014, 12:54

Potressti inserire un link con display:block, posizionamento assoluto e dimsensioni corrispondenti a quelle della stella, da posizionare sopra la stella stessa

**luigi45** · 01-11-2014, 14:01

ma come faccio a fare una mappa visto che la stella ha le punte?

**tampertools** · 01-11-2014, 19:21

Se anzi che come background includi la stella con il tag <img>, puoi usare i tag <map> e <area>

Ecco un esempio:
http://jsfiddle.net/81bo1phk/embedded/result,html,css/
Ho reso cliccabile solo la stella, se provi a spostare il mouse dentro l'immagine ma fuori dalla stella (negli angoli bianchi dell'immagine) vedrai che non è più cliccabile

**Tonenge** · 07-11-2014, 23:59

Ciao luigi45, ti propongo una soluzione "alternativa", disegnando la stella in un canvas per esempio con "drawImage" puoi leggere il colore del pixel al click e sapere quindi se hai cliccato sopra la stella anziché la trasparenza.
Nell'esempio ho disegnato velocemente la stella con delle linee.
Per il "mouseover" ho sfruttato lo stesso principio.

Saluti

<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script>

function f_star(){
var j=document.getElementById("id_star"), cj=j.getContext("2d");

// disegno stella oppure inserire immagine in canvas
with(cj){
fillStyle="#FF0";
strokeStyle="#F00";
lineWidth=1; beginPath();
moveTo(52,5); lineTo(67,34); lineTo(100,39); lineTo(79,64); lineTo(83,97);
lineTo(52,84); lineTo(22,98); lineTo(25,66); lineTo(1,39); lineTo(35,35);
closePath(); stroke(); fill();
}
}

function f_click(e){
if(f_over(e)) alert("click su Stella");
}

function f_mouseover(e){
var j=e.target||e.srcElement;
j.style.cursor=f_over(e)?"pointer":"default";

}

function f_over(e){
var j=e.target||e.srcElement, cj=j.getContext("2d"),
P=getMouseXY(e), x=P.x-parseInt(j.style.left), y=P.y-parseInt(j.style.top),
c = cj.getImageData(x,y,1,1).data;
if(c[0]+c[1]+c[2]) return true;
return false;
}

function getMouseXY(e) {
return { x

e.pageX ? e.pageX : e.clientX+document.body.scrollLeft-document.body.clientLeft),
y

e.pageY ? e.pageY : e.clientY+document.body.scrollTop-document.body.clientTop) };
}

</script>
</head>
<body onload='f_star()'>

<canvas id='id_star' style='position:absolute;left:300px;top:100px;' width='120' height='120' onclick='f_click(event)' onmousemove='f_mouseover(event)'></canvas>

</body>
</html>

**tampertools** · 08-11-2014, 00:12

Bell'esempio

Ti chiedo per favore di racchiudere il codice tra i tag del forum [code] e [/code]

**Tonenge** · 09-11-2014, 21:00

Grazie,
non avevo letto attentamente le regole ed infatti non capivo perché il codice non veniva mostrato correttamente.

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<script>


function f_star(){
  var j=document.getElementById("id_star"), cj=j.getContext("2d");
  
  // disegno stella  oppure inserire immagine in canvas
  with(cj){   
    fillStyle="#FF0";
    strokeStyle="#F00";
    lineWidth=1; beginPath();  
    moveTo(52,5); lineTo(67,34); lineTo(100,39); lineTo(79,64); lineTo(83,97);
    lineTo(52,84); lineTo(22,98); lineTo(25,66); lineTo(1,39);  lineTo(35,35);
    closePath(); stroke(); fill();      
  }  
}




function f_click(e){
  if(f_over(e)) alert("click su Stella");
}


function f_mouseover(e){
  var j=e.target||e.srcElement;
  j.style.cursor=f_over(e)?"pointer":"default";

}


function f_over(e){
  var j=e.target||e.srcElement, cj=j.getContext("2d"),
  P=getMouseXY(e), x=P.x-parseInt(j.style.left), y=P.y-parseInt(j.style.top),
  c = cj.getImageData(x,y,1,1).data;
  if(c[0]+c[1]+c[2]) return true;
  return false;
}


function getMouseXY(e) {
  return { x:(e.pageX ? e.pageX : e.clientX+document.body.scrollLeft-document.body.clientLeft), 
           y:(e.pageY ? e.pageY : e.clientY+document.body.scrollTop-document.body.clientTop) };
}


</script>  
  </head>
  <body onload='f_star()'>

  <canvas id='id_star' style='position:absolute;left:300px;top:100px;' width='120' height='120' onclick='f_click(event)' onmousemove='f_mouseover(event)'></canvas>

  </body>
</html>

Discussione: zona cliccabile

Strumenti discussione

Ricerca discussione

Visualizza

zona cliccabile

Permessi di invio