[RISOLTO] inserire un link sopra un immagine

[squalogu]

come posso inserire un link (composto da una parola) sopra un immagine?


inserendo un immagine in un modulo html, come posso collocare un link sopra?


grazie

[56francesco]

usa il tastino con l'immagine della catenella  (editor)
la catenella rotta toglie il link nella parte selezionata dal cursore, la catenella sana inserisce un link nella parte selezionata..

[squalogu]

ciao grazie per la risposta,
ma parli della funzione editor/insert link?


io devo inserire più parole parola come ad esempio "clicca qui" dentro o sopra un immagine .jpg che ho inserito in un modulo "HTML personalizzato" non affianco e non devo inserire un link dall'intera immagine ad una pagina esterna.
non voglio neanche mappare l'immagine, vorrei dei link
potresti essere più preciso, grazie.

[giusebos]

metodo semplice:
prendi l'immagine e con un editor di immagini tipo GIMP ci scrivi sopra "CLICCA QUI", poi l'immagine la inserisci nel tuo modulo html e la corredi di link.

Mentre usa l'esempio per questo metodo più avanzato:


questo il codice html:

Codice: [Seleziona]

<div class="caption">
   <img src="esempio2.jpg" alt="" />
   <span>
      <strong>Lorem ipsum</strong>
      Lorem ipsum dolor sit amet consectetuer eros
      vivamus porta interdum venenatis.
   </span>
</div>

questo il codice css:

Codice: [Seleziona]

.caption {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
 
.caption img {
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
}
 
.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
     
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}
 
.caption span strong {
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    display: block;
    padding-bottom: 5px;
}

[56francesco]

ciao grazie per la risposta,
ma parli della funzione editor/insert link?


io devo inserire più parole parola come ad esempio "clicca qui" dentro o sopra un immagine .jpg che ho inserito in un modulo "HTML personalizzato" non affianco e non devo inserire un link dall'intera immagine ad una pagina esterna.
non voglio neanche mappare l'immagine, vorrei dei link
potresti essere più preciso, grazie.

mappare sarebbe cosa diversa
pure nel modulo html personalizzato ci sta l'editor..
e puoi usarlo come sopra...

[squalogu]

grazie Giusebos, ora ci lavoro un pò su in base alle tue indicazioni.







grazie 56francesco ora sono consapevole del fatto che : mappare sarebbe cosa diversa.

[squalogu]

Giusebos quando scrivo "clicca qui" con gimp sull'immagine, poi la salvo nuovamente come .jpg?


quindi quando inserisco l'immagine con la scritta "clicca qui" in un modulu personalizzato html, come faccio a redarla di link? nel senso la scritta "clicca qui" fa parte dell'immagine e non è selezionabile. giusto?




grazie

[giusebos]

la scritta sull'immagine inserita con gimp farà parte dell'immagine..per capirsi la leggeranno persone umane sensienti e vedenti

[squalogu]

husuhahuahuauhauhauhauahuh ok!  chiarissimo..


ok e questo modo l'ho capito, se invece non volessi mappare l'immagine quindi nel nostro caso la parte dell'immagine con la scritta "clicca qui", ma volessi inserire un link sopra l'immagine come in questo esempio: http://www.pugliae.com/


devo usare il codice html che mi hai indicato???




grazie

[56francesco]

mappare significherebbe scrivere una pagina intera html e poi pubblicarla in qualche modo, ma dovresti prima "tradurla" in php
fai le cose semplici,  che è meglio..

[giusebos]

il codice che ti ho postato serve proprio ad avere una scritta individuabile e selezionabile, il css serve a posizionarlo

[squalogu]

ok. il codice html lo inserirò quindi nel modulo html personalizzato, e il codice css pure? o dove va collocato quest'ultimo?

[56francesco]

il codice css lo puoi incollare in un qualsiasi file di tipo css  del template che stai usando

il codice html  potresti inserirlo in un modello di joomla richiamabile dall'editor  con l'ultimo tastino dell'editor di default   (modello predefinito)
così se ti dovesse servire di nuovo lo troveresti immediatamente.

in effetti avevo compreso poco della domanda iniziale,  ovvio che non potevi essere soddisfatto dalla mia risposta.

[squalogu]

ok ci sto lavorando.


al posto di questa scritta:  "Lorem ipsum"  devo inserire ad esempio "clicca qui e al posto di "dolor sit amet consectetuer eros vivamus porta interdum venenatis" devo inserire il link che mi interessa?  giusto?



poi con codiche di css stabilisco la posizione di "clicca qui" all'interno dell'immagine


PS. ho provato a inserire il link che mi interessa, ma viene visualizzato solo il codice

[squalogu]

sono bloccato, nel senso il link lo devo inserire al posto di lorem ipsum?


e il corpo CSS lo inserisco in un qualsiasi file CSS del template che scarico tramite ftp dalla root?

[giusebos]

il codice del css lo inserisci nel file del css principale,
mentre il codice html lo inserisci nel modulo html disabilitando prima l'editor.

In questa finestra sostituirai le parole che non desideri.

[squalogu]

Ciao giusebos, per capire meglio: il codice CSS lo posso inserire dove mi hai indicato nell'altro post stesso percorso stesso file? (post -cambiare colore al link al passaggio del mouse)






invece il codice html l'ho inserito dove mi hai detto, e come faccio a rendere link la parola che sostituisco?

[giusebos]

Ciao giusebos, per capire meglio: il codice CSS lo posso inserire dove mi hai indicato nell'altro post stesso percorso stesso file? (post -cambiare colore al link al passaggio del mouse)

si

Codice: [Seleziona]

invece il codice html l'ho inserito dove mi hai detto, e come faccio a rendere link la parola che sostituisco?
ti ricordo il nome del dominio: xxxxxxxxxx.com

linka semplicemente l'immagine

[squalogu]

wow... capito!


sono a metà dell'opera.


ho eliminato la parola tra i tag strong.. tanto n on mi serviva e provando ho eliminato "span" ed sono riuscito ad eliminare anche uno sfondo grigio che appariva sotto la scritta.




se voglio inserire un altra parola quale stringa devo usare? perché io ho fatto un copia e incolla ma mi sono apparse due cartine, devo copiare questa stringa e modificarla?

Codice: [Seleziona]

<div class="caption"><img src="images/immagine.png" alt="" />




<a href="http://........">scrivo qua </a></span><>




per aumentare e modificare il testo guardo su google..

[squalogu]

ok ci sono,


ho inserito più link.


ora devo solo posizionare, mi muovo quindi su CSS., devo inserire le coordinate? che sono riferite e fisse all'immagine, quindi anche se mi collego con un dispositivo diverso come un tablet o cellulare i link rimangono nella posizione in riferimento all'immagine (della sardegna in questo caso)?




come ottengo le coordinate?