Joomla.it Forum
Joomla! 3 => Joomla! 3 => : squalogu 24 Apr 2014, 11:38:04
-
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
-
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..
-
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.
-
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:
<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:
.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;
}
-
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...
-
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.
-
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
-
la scritta sull'immagine inserita con gimp farà parte dell'immagine..per capirsi la leggeranno persone umane sensienti e vedenti ;)
-
husuhahuahuauhauhauhauahuh ok! chiarissimo.. 8)
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
-
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..
-
il codice che ti ho postato serve proprio ad avere una scritta individuabile e selezionabile, il css serve a posizionarlo
-
ok. il codice html lo inserirò quindi nel modulo html personalizzato, e il codice css pure? o dove va collocato quest'ultimo?
-
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.
-
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
-
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?
-
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.
-
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?
-
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
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
-
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?
<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..
-
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?
-
qui non ho capito, siamo passati da un argomento ad un altro.
Se desideri mappare un immagine la strada è completamente diversa......
per intenderci se vuoi cliccare su determinate zone dell'immagine della sardegna, occorre la mappatura dell'immagine.
-
no., desidero posizionare il link in un determinato punto dell'immagine.... Pensavo che intendessi questo quando mi hai parlato di posizione nel CSS.... non desidero cliccare una zona dell'immagine ma il link, ma posizionarlo sopra l'immagine in un punto specifico.... non mi dire che ho frainteso tutto...
avevo anche riportato l'esempio di pugliae.com
-
l'esempio di pugliae.com si è perso nei meandri di tutte queste botta e risposta....
Ti occorre una mappatura dell'immagine
cerca con google "mappe di immagine", troverai diversi esempi pratici
-
ok. lo farò.
ma continuo a non capire.
mi hai dato i due codici perchè avevi capito che mi serviva inserire un unico link all'interno del modulo personalizzato HTML? ma a quel punto non c'era bisogno di inserire nessun codice css, inserivo semplicemente un link.
mi hai detto che il code del CSS serviva al posizionamento, di che cosa? del link all'interno dell'immagine o di cosa
in pugliae.com quella è una mappatura immagine?
la mappatura immagine non consiste nel attivare un area di un immagine e collegarmi un link?
riformulo la domanda, come ottengo il risultato della mappa di pugliae.com?
-
qualcuno sa indicarmi se posso ottenere con "mappatura" la mappa presente in home page nel sito pugliae.com ?
o come posso fare per far visualizzare dei link cliccabili sopra un immagine come in quel caso?
i tutorial per immagini cliccabili (o imagemap) che ho trovato si riferiscono a selezionare una parte di immagine e dare la possibilità di cliccarci sopra. Io vorrei far comparire del testo cliccabile (non sottoforma di disegno)
-
Io non ho capito nulla di quello che vuoi fare
-
vorrei creare una mappa simile a quella presente qua: pugliae.com
dove ho la possibilità di cliccare ad esempio su: Foggia, quindi sopra una scritta non sopra una semplice porzione di immagine
-
Allora devi mappare l'immagine.
Fai l'immagine con le scritte che vuoi, unisci i livelli e poi mappi le scritte che sono in fin dei conti una porzione di immagine ;)
Comunque sono argomenti da forum di grafica e non di joomla.
Ciao!
-
si hai ragione. adesso che abbiamo inquadrato l'argomento si...
posso solo chiedere come ottengo un effetto simile al passaggio del mouse?
(a:hover per caso)?
grazie
-
l'indicazione che mi aveva dato giusebos all'inizio codice html + css è corretta., perchè dopo avete cambiato opinione?
mi avete consigliato che per realizzare una mappa simile a quella presente sulla home di pugliae. com è necessaria una mappatura dell'immagine, invece con quei due codici ora che vedo anche qualche tutorial con firebug dovrebbe essere sufficiente o sbaglio?
-
ho cercato molto e studiato per realizzare una cosa simile alla mappa di pugliae.com , ma trovo solo guide o altro per mappare o fare mappe simile a queste: html.it/pag/16053/le-mappe-di-immagine/
qualcuno può suggerirmi una guida o altro?
-
non ci sono guide per queste cose, un pò come se uno cercasse una guida per riempire un bicchiere di acqua...
se analizzi la pagina vedi che quei link sono semplicemente una lista ordinata, poi ad ogni link, che deve avere una sua classe, gli si danno delle coordinate con i css,
ad esempio
.tua_classe {
left: 58px;
top: 186px;
}
naturalmente poi ci devono essere le classi per i capoluoghi di provincia e per i centri più piccoli
-
ok, per ora mi interessa almeno posizionare un link, poi penserò ai capoluoghi.
Quello che non capisco è: l'immagine della puglia in questo caso, è un immagine di background? o posso inserirla anche come (inserisci immagine dal modulo) ?
quindi i link per ora risultano fuori dall'immagine perchè non ho inserito le classi nel css?
GRAZIE!
-
regoli tutto con i css, devi fare in modo che la mappa vada posizionata sotto i link, usando un div specifico
-
... ok, che div? ;D
-
penso che ti serva un tutor, perchè così non andiamo da nessuna parte.
-
<p><img src="images/sardinia.png" alt="" /></p>
posso specificare in questo modo l'immagine all'interno del modulo e inserire i codici che mi hai suggerito nel css?
-
o mi stai consigliando di inserirla direttamente dal css?
e in questo caso come faccio a specificare in che modulo posizionarla?
-
nello zip un esempio che puoi inserire in un modulo html, naturalmente devi rivedere le dimensioni della sardegna e le coordinate dei testi, inoltre personalizzerai a piacimento gli stili delle città
nello zip c'è un file html, un css e una immagine della sardegna
[allegato eliminato automaticamente dopo un anno]
-
:o ...GRAZIE... non ho parole... ti faccio sapere il risultato :)
-
ho copiato il codice css nel mio css template principale, modificando la stringa in questo modo: background-image: images/sardinia.png;
poi nel modulo ho incollato il codice html.
l'unica cosa che non carica è l'immagine di background, ho provato in vari modi, anche a spostare l'immagine nella root, o inserire l'intero url, ma non la carica
dove sto sbagliando?
ti allego il risultato attuale
[allegato eliminato automaticamente dopo un anno]
-
il codice css lo incolli nel file css principale del tuo template
l'immagine la inserisci nella cartella images del tuo template
il codice html, solo quello che c'è fra i tag body lo incolli in un modulo html con l'editor disattivato
-
si si è esattamente quello che ho fatto, ma l'immagine di background non compare.... forse perchè la mia è un png? e deve essere un jpg?
background-image: sardinia.png;
beautifulsardinia.com
-
background-image: sardinia.png;
questo codice è completamente sbagliato, guarda semplicemente nel file css (quello del template cercando un altra immagine) come viene formattato.
-
ho copiato la/ le immagini nella cartella images della root, poi
ho provato a scrivere nel codice css principale del mio templates il codice che mi hai inviato:
background-image: url(sardegna.jpg);
background-image: url(images/sardegna.jpg);
background-image: url(sardinia.png);
background-image: url(images/sardinia.png);
poi ho provato anche ad incollarlo nel css dello stile (perchè il template ha diversi colori)
ma non si vede ???
-
allego i file che ho modificato e inserito
[allegato eliminato automaticamente dopo un anno]
-
giuseboss hai visto come ho modificato i codici? dovrebbe essere corretto?
-
non ho visto quello che hai fatto, ma se lo hai fatto bene deve funzionare come funziona il codice che ti ho inviato.
-
Giuseboss ci sono riuscito!
ti ringrazio infinitamente!
-
PS.
quando elimino la cache dal pannello di controllo.... automaticamente mi cancella le stringhe che ho aggiunto .... ???
-
quali stringhe, html o css
-
css
-
ma tu in quale file le incolli?
usi una cache del template (se si toglila in fase di svilupo)
-
...?
io sono entrato dal pannello di controllo e sotto la cartella css ho editato il file template.css
sbagliato?
come mai sparisce secondo te?
-
nel file
beautifulsardinia.com/templates/jm_galeria/css/template.css,
il codice è chiaramente visibile in fondo, ed in fatti vedo chiaramente la sagoma della sardegna con i due link porto torres e sassari "piazzati"
prova a ripulire la cache del tuo browser o prova a navigare con altri browser mai usati nel tuo sito
-
si si., tutto ok.
dicevo solo che se pulisco la cache dal pannello di amministrazione di joomla., allora in quel caso sparisce.
-
che ne pensi? dici che devo ho editato il file sbagliato?
-
ma io adesso lo vedo senza problemi
-
si e su questo siamo d'accordo.
ma ti dicevo che se io accedo da www.miosito.it7administrator e poi vado in sistema --> pulisci cache... allora in questo caso spariscono le stringhe che abbiamo inserito...
strano vero?
-
non è strano, dipende sempre da come si sono impostate cache e quant'altro.
la cache non dovresti cancellarla in quanto il sito, attualmente in lavorazione, dovrebbero avere disabilitato qualsiasi tipo di cache, sia di joomla che di template che qualsiasi altra cosa.
-
ho scritto all'assistenza del templates e mi hanno detto di implementare il codice qua:
templates/[your_template]/less/theme.less
ho fatto e sparisce l'immagine di background...
-
Ciao,
posso chiederti come mai secondo te l'hover nelle due scritte sopra la cartina non funzionano? ho impostato come mi avevi suggerito di inserire la stringa finale che puoi notare nel codice del template.
Poi ti ricordi che dall'assistenza mi avevano detto che è bene che il seguente codice del css venga incorporato nel fil less... poichè se e quando svuota la chache del template da joomla, sparisce il codice inserito, ma alla fine pensavo che quando abiliterò la cache conservativa, non ci sarà più bisogno di cancellarla e/o toccarla, in modo da lasciar perdere il fatto di doverlo scrivere nel file less
grazie
css templates:}
#regione {
width: 350px;
height: 450px;
background-image: url(/images/sardegna.png);
}
.citta {
font-family: Tahoma, Geneva, sans-serif;
text-transform: capitalize;
font-size: 109%;
}
#regione ul li {
list-style: none;
}
#regione ul li a.sassari {
color: #0099FF;
left: -19px;
position: relative;
top: 110px;
font-size: 90%;
}
#regione ul li a.porto_torres {
color: #0099FF;
position: relative;
top: 59px;
left: -83px;
font-size: 90%;
}
.jm-module a:hover span {
color: #005E52 !important;}
html modulo
<div id="regione">
<div class="citta">
<ul>
<li><a class="sassari" href="http://sassari.html" title="sassari">sassari</a></li>
<li><a class="porto_torres" href="http://porto_torres.html" title="porto torres">porto torres</a></li>
</ul>
<>
<>
-
l'hover non funzione perchè hai modificato qualcosa nel codice....
adesso il css che ne regola il colore è questo
#regione ul li a:hover {
color: #ffcc00;
}
per la storia della cache, quello che hai scritto non ha senso.
devi incollare il codice css nel file less in modo tale che il template in piena autonomia ne compili il css finale
-
ok allora vedrò di modificare il file less.
per l'hover
ho modificato come mi dici ma forse sto ancora sbagliando.. ora compaiono anche i due puntini sopra la mappa.. non capisco non ho toccato il codice a quanto ricordi..
}
#regione {
width: 350px;
height: 450px;
background-image: url(/images/sardegna.png);
}
.citta {
font-family: Tahoma, Geneva, sans-serif;
text-transform: capitalize;
font-size: 109%;
}
#regione ul li a:hover {
color: #ffcc00;
}
#regione ul li a.sassari {
color: #0099FF;
left: -19px;
position: relative;
top: 110px;
font-size: 90%;
}
#regione ul li a.porto_torres {
color: #0099FF;
position: relative;
top: 55px;
left: -73px;
font-size: 90%;
}
.jm-module a:hover span {
color: #005E52 !important;
}
-
niente giuseboss non riesco a trovare la configurazione corretta.....
-
qualche consiglio?
cosa manca
-
sinceramente non so cos'altro aggiungere.
-
quindi è corretto? che strano... i link non appartenenti alla mappa funzionano regolarmente, quelli sopra l'immagine, funzionano come link, ma non come hover..
-
#regione ul li a:hover {
color: #ffcc00;
--------------------------------------------------------
.jm-module a:hover span {
color: #005E52 !important;
scusate se ci riprovo, io ho due hover.. li devo lasciare tutti e due? o elimino uno? perchè le scritte sopra nell'immagine non cambiano colore al passaggio del mouse..
-
devi lasciarli entrambi, il primo è specifico per il to modulo, il secondo vale per i moduli in generale
-
ciao,
no il secondo l'ho tolto perchè non cambia niente nel templates, comunque sia gli altri link funzionano come hover con e senza quella stringa.
per la prima invece se inserisco:
#regione ul li a:hover {
color: #ffcc00;
sei vedono solo dei puntini sopra la regione e ai link non succede nulla,
se inserisco:
nella città specifica:
}
#regione ul li a.sassari a:hover{
color: #0099FF;
left: -41px;
position: relative;
top: 63px;
allora funziona, ma la scritta non segue il posizionamento
-
Però abbi pazienza 21 post dopo un risolto significa che o non hai risolto o stai chiedendo altre cose e la discussione diventa inutilmente lunga e inservibile. Poiché non voglio rileggermi tutti i 71 post regolati tu e decidi se è risolta o no e adegui il titolo oppure apri una nuova discussione. :)
-
hai ragione, scusate.
si il problema originale è risolto.
nel caso apro un altro post.
grazie
ciao