delle immagini come collegamenti?

Printable View

Visualizza 50 messaggi di questa discussione su una pagina

25-06-2009, 18.11.23

delle immagini come collegamenti?

ciao ,,sapete mentre navigavo ho visto un sito nel quale era presente un 'immagine e se ci clikkavo sopra collegava ad un altra pagina....
quale è il codice per far diventare un immagine un collegamento???

chiedo sopratutto al mio caro biccheddu!!!:wink:
25-06-2009, 19.34.24

devi mettere il tag dell'immagine dentro a quello del link

Codice HTML:

<a href="pagina.html"><img src="nomeimmagine.jpg"></a>
25-06-2009, 20.03.16

grazie mille caro dolce palla000 lo testo subito
25-06-2009, 20.33.50
acsocmel

html immagine

attento a come scrivi il tag img

Citazione:

Originalmente inviato da palla000

<img src="nomeimmagine.jpg" alt="some word" />
o così
<img src="nomeimmagine.jpg" alt="some word" width="tot.px" height="tot.px"/>
25-06-2009, 23.15.33

Scusa, acsocmel, perchè dopo il nome dell'immagine si deve inserire
....alt="some word"width="tot.px" height="tot.px"/> ????
Io nella mia index.html, ho inserito l'indirizzo della pagina dove si deve aprire il collegamento<A href="http//:indirizzopagina">, e di seguito <img src="nomeimmagine.jpg"/></A> , sembra che il collegamento funziona!! forse in seguito potrebbe smettere di aprirsi???
Grazie, buonanotte
Maria
25-06-2009, 23.22.06
alemoppo

alt è la descrizione della foto (quando ci passi sopra con il puntatore.)

width è la larghezza della foto, quindi bisogna sostituirlo con un valore; oppure una variabile di JS :wink: {più semplicemente non metterlo per niente per avere la foto con dimensioni originali :wink:}

Per essere xHTML valido, invece di questo:

Codice HTML:

<img src="nomeimmagine.jpg" alt="some word" width="tot.px" height="tot.px"/>

deve essere:

Codice HTML:

<img src="nomeimmagine.jpg" alt="some word" width="tot.px" height="tot.px" />

.

Oppure, (come penso, perché l'utente da quello che ho capito da altri post è alle prime armi) usare semplicemente HTML {e' pressocché identico :wink:}...e quindi non mettere la slash finale :wink:

Ciao!

EDIT:
RICORDATE che in quel modo, le immagini avranno un fastisioso contorno. Usate la funzione "cerca" per vedere come evitarla.

{con il pulsante cerca, si sarebbe evitata anche questa discussione :???:}

EDIT1:

height rappresenta l'altezza della foto!
25-06-2009, 23.24.45

nono, sono tutte cose "opzionali": l'attributo alt serve per sostituire l'immagine se non viene caricata, width e height definiscoo rispettivamente larghezza e altezza e / indica che il tag si chiude (piglonerie dell'xhtml xD)

per approfondimenti sul tag img clicca qui: http://www.w3schools.com/tags/tag_img.asp
25-06-2009, 23.31.42
alemoppo

Citazione:

Originalmente inviato da arazz

nono, sono tutte cose "opzionali": l'attributo alt serve per sostituire l'immagine se non viene caricata, width e height definiscoo rispettivamente larghezza e altezza e / indica che il tag si chiude (piglonerie dell'xhtml xD)

Cosa ho detto :???:???

Citazione:

Originalmente inviato da alemoppo

{più semplicemente non metterlo per niente per avere la foto con dimensioni originali :wink:}

{e altro...}

EDIT:

Consiglio pure io una buona guida di HTML, ma a quanto pare il nostro amico non ne vuole sapere (visto in altri post). Almeno la funzione "cerca" per "tentare" di non essere bannati :wink:

Ciao!
26-06-2009, 00.24.43
acsocmel

@mariaandmaria
abituarsi a scrivere il codice nella maniera migliore possibile
evita di dover perdere tempo a cercare gli errori che inevitabilmente si commettono
ci fa risparmiare tempo che possiamo utilizzare per scatenare la fantasia
e ci permette di utilizzare nuove soluzioni quando se ne presenta l'occasione, senza dover rimettere mano al codice in maniera pesante

possono benissimo essere interpretate come pignolerie, sapendo che i browser sono di bocca buona, ma ci stiamo avvicinando al momento in cui i siti si trasformeranno in web-applications
allora la ricetta nella pagina consigli potrebbe essere letta dal forno per cucinare o dal frigorifero per ordinare la spesa

e dopo questo delirio notturno, scusatemi vado a riflettere sul destino del mondo :-)

@alemoppo
in xhtml width e height non servono / sono sconsigliati
tutto il contrario dell'html
26-06-2009, 09.47.03

@alemoppo: scusami, il nono era per mariaandmaria, io e te abbiamo postato praticamente insieme e non ho letto il tuo messaggio =)
26-06-2009, 17.04.46
alemoppo

Citazione:

Originalmente inviato da acsocmel

@alemoppo
in xhtml width e height non servono / sono sconsigliati
tutto il contrario dell'html

Allora perché in questa discussione li hai introdotti proprio te??:???:

Citazione:

Originalmente inviato da acsocmel

attento a come scrivi il tag img

Citazione:

<img src="nomeimmagine.jpg" alt="some word" />
o così
<img src="nomeimmagine.jpg" alt="some word" width="tot.px" height="tot.px"/>

E poi, hai letto qui?:

Citazione:

Originalmente inviato da alemoppo

{più semplicemente non metterlo per niente per avere la foto con dimensioni originali :wink:}

allora perché mi hai detto così??

Citazione:

Originalmente inviato da acsocmel

@alemoppo
in xhtml width e height non servono / sono sconsigliati
tutto il contrario dell'html

...Va be: siamo molto OT; quindi non continuo più...

Ciao!
26-06-2009, 17.26.52

Grazie ragazzi,
le vostre informazioni sono molto interessanti.
Alemoppo parla della funzione cerca per non essere bannati, vado a cercare
e mi ritiro in buon ordine.
Ciao, saluti
Maria
26-06-2009, 18.02.59
acsocmel

mi è scappato uno slash
pardon :)
26-06-2009, 19.01.08
darkwolf

Tanto per fare un po di chiarezza dato che ho letto alcune "inesattezze"

@alemoppo: L'attributo ALT NON è la descrizione della foto (quando ci passi sopra con il puntatore).
Anzi la questione del mini-popup è un comportamento errato di IE (difatti nessun altro browser lo interpreta a quel modo).
Per il minipopup l'attributo corretto è il "title".

@arazz: L'attributo ALT NON serve per sostituire l'immagine se non viene caricata (perlomeno non esattamente).

ALT (da alternativo) serve sopratutto per i browser "testuali" (lynx e vari crawlers) e per eventuali lettori affetti da cecità (utilizzatori di screen-reader).
Quindi, sia per una migliore indicizzazione che per garantire un'alternativa dell'immagine ai lettori ciechi è sempre bene usarlo.
Un altro attributo estremamente utile (ma poco usato) è il longdesc (long description).
Height e width possono essere benissimo omessi se non è necessario ridimensionare l'immagine.
Quindi un link con immagine (accessibile e xhtml valido) dovrebbe essere più o meno così:

Codice HTML:

<a href="hxxp://link.xx" title="Profilo di darkwolf"> <img src="avatar.gif" alt="Avatar di darkwolf" style="width: 80px; height: 80px; border: 0;" /> </a>

o meglio ancora (massima accessibilità) così:

Codice HTML:

<a href="hxxp://link.xx" title="Profilo di darkwolf"> <img src="avatar.gif" alt="Avatar di darkwolf" longdesc="descrizione.html" style="width: 80px; height: 80px; border: 0;" /> </a>

descrizione.html dovrebbe contenere una descrizione dettagliata dell'immagine con caratteri cubitali :wink:
26-06-2009, 19.17.09
alemoppo

Citazione:

Originalmente inviato da darkwolf

@alemoppo: L'attributo ALT NON è la descrizione della foto (quando ci passi sopra con il puntatore).
Anzi la questione del mini-popup è un comportamento errato di IE (difatti nessun altro browser lo interpreta a quel modo).
Per il minipopup l'attributo corretto è il "title".

Anche firefox :wink:
26-06-2009, 19.34.19
darkwolf

Citazione:

Originalmente inviato da alemoppo

Anche firefox :wink:

Assolutamente no :P
Che firefox "tarocco" stai usando? :D
http://blog.html.it/12/04/2006/alt-e-tooltip/
26-06-2009, 19.51.56
alemoppo

Il mio firefox:

http://i43.tinypic.com/22kvuw.png

"Prova": (il puntatore del mouse non si vede, perché è uno screen...)

http://i42.tinypic.com/rcss29.png

:wink:

Ciao!
26-06-2009, 20.00.48
darkwolf

Vedi che sull'avatar c'è sia l'alt che il title :P
Per questo firefox mostra il popup :wink:
-
http://img199.imageshack.us/img199/8422/titlekfm.jpg
-
http://img199.imageshack.us/img199/9506/altw.jpg
-
PS: vedi che siamo a Firefox 3.0.11 :wink:
26-06-2009, 20.06.44
alemoppo

Fino oggi pensavo che alt.. {sulle guide c'é scritto che è un testo alternativo, ma io lo usavo per far apparire il popup :???:}

Comunque:

Citazione:

Originalmente inviato da darkwolf

PS: vedi che siamo a Firefox 3.0.11 :wink:

...come sai (ANCORA) ho la 56k: non ho voglia di perdere un' ora o più per scaricarmi lo 3.0.11, anche se firefox me lo chiede 5 volte al giorno :???:

Ciao!
28-06-2009, 22.53.33

Citazione:

Originalmente inviato da darkwolf

Tanto per fare un po di chiarezza dato che ho letto alcune "inesattezze"

ALT (da alternativo) serve sopratutto per i browser "testuali" (lynx e vari crawlers) e per eventuali lettori affetti da cecità (utilizzatori di screen-reader).
Quindi, sia per una migliore indicizzazione che per garantire un'alternativa dell'immagine ai lettori ciechi è sempre bene usarlo.
Un altro attributo estremamente utile (ma poco usato) è il longdesc (long description).
Height e width possono essere benissimo omessi se non è necessario ridimensionare l'immagine.
Quindi un link con immagine (accessibile e xhtml valido) dovrebbe essere più o meno così:

Codice HTML:

<a href="hxxp://link.xx" title="Profilo di darkwolf"> <img src="avatar.gif" alt="Avatar di darkwolf" style="width: 80px; height: 80px; border: 0;" /> </a>

o meglio ancora (massima accessibilità) così:

Codice HTML:

<a href="hxxp://link.xx" title="Profilo di darkwolf"> <img src="avatar.gif" alt="Avatar di darkwolf" longdesc="descrizione.html" style="width: 80px; height: 80px; border: 0;" /> </a>

descrizione.html dovrebbe contenere una descrizione dettagliata dell'immagine con caratteri cubitali :wink:

Chiedo scusa darkwolf,
perchè <a href="h....................=" title="Profilo di .......">
non capisco il title in quella posizione????:?::?::?:

Io il title l'ho inserito diversamente,
<A href="http://mariaedoardo-edoardomaria.blogspot.com/"target="_blank"><img src="http://mariaandmaria.altervista.org/immagini/mariaandmaria.jpg" title="Queste foglie d'autunno rappresentano me, Maria, nel percorso del mio autunno." alt="Foglie d'autunno" style="width:80px; height:80px; border:0;"/></A>:incavolat

per favore puoi suggerirmi qual'è la posizione giusta??:???:
28-06-2009, 23.05.48
darkwolf

Per abitudine, nel caso di immagine con link, io metto il title al link e l'alt all'immagine.
Se è solo un'immagine senza link metto all'img l'alt e, solo se necessario, il title.
Nel caso di link testuale metto ovviamente solo il title.
Inomma title al link e alt all'img :wink:
-
Sia chiaro che, fondamentalmente, va bene anche metterli entrambi all'immagine.
28-06-2009, 23.33.05

Citazione:

Originalmente inviato da darkwolf

Per abitudine, nel caso di immagine con link, io metto il title al link e l'alt all'immagine.
Se è solo un'immagine senza link metto all'img l'alt e, solo se necessario, il title.
Nel caso di link testuale metto ovviamente solo il title.
Inomma title al link e alt all'img :wink:
-
Sia chiaro che, fondamentalmente, va bene anche metterli entrambi all'immagine.

Darkwolf,
sono ancora più perplessa! Ho messo il title al link, ma non capisco a cosa serve, visto che non apre nessuna finestra popup? chi lo legge??

Scusa la mia ignoranza, ho solo bisogno di capire, per riuscire in seguito a crearmi un sito decente!!

Buona notte,
Maria
29-06-2009, 00.50.38
alemoppo

Citazione:

Originalmente inviato da mariaandmaria

Darkwolf,
sono ancora più perplessa! Ho messo il title al link, ma non capisco a cosa serve, visto che non apre nessuna finestra popup? chi lo legge??

Scusa la mia ignoranza, ho solo bisogno di capire, per riuscire in seguito a crearmi un sito decente!!

Buona notte,
Maria

Con una cosa del genere:

Codice HTML:

<html> <head> <title> ciao </title> </head> <body> <a href='#' title='Questa è la descrizione della foto'> <img src='immagind.png'> </a> </body> </html>

Non ti appare niente??

(RICORDO che appare solo se metti il mouse sopra la foto e aspetti un attimo :wink:)

Ciao!
29-06-2009, 15.01.28

[QUOTE=alemoppo;674900]Con una cosa del genere:

Codice HTML:

<html> <head> <title> ciao </title> </head> <body> <a href='#' title='Questa è la descrizione della foto'> <img src='immagind.png'> </a> </body> </html>

Non ti appare niente??

Alemoppo,
se inserisco title al link ed elimino alt all'immagine la scritta appare!
ma io volevo eseguire i passaggi che suggerisce Darkwolf, cioè il title al link
e alt all'immagine ma in questo modo si vede solamente la descrizione dell'alt ed allora quella del title a cosa serve??:crycry:
Ciao, saluti
Maria
29-06-2009, 15.03.09
darkwolf

Citazione:

Originalmente inviato da mariaandmaria

cioè il title al link
e alt all'immagine ma in questo modo si vede solamente la descrizione dell'alt ed allora quella del title a cosa serve??:crycry:
Ciao, saluti
Maria

Veramente si dovrebbe vedere solo il title e non l'alt. :roll:
29-06-2009, 15.18.16

Citazione:

Originalmente inviato da darkwolf

Veramente si dovrebbe vedere solo il title e non l'alt. :roll:

Ciao Darkwolf
si vede solamente la scritta dell'alt quella del title???

http://mariaandmaria.altervista.org/index.html

le scritte sono due diverse e quella che appare è dell'alt

probabilmente sbaglio!!

Saluti
Maria
29-06-2009, 15.32.18
darkwolf

Con firefox si vede correttamente il title, con IE solo l'alt :???:
Prova a cambiare questo:

Codice HTML:

<A href="http://mariaedoardo-edoardomaria.blogspot.com/"target="_blank" title="Queste foglie d'autunno rappresentano me, Maria, nel percorso del mio autunno."><img src="http://mariaandmaria.altervista.org/immagini/mariaandmaria.jpg" alt="Foglie d'autunno" style="width:80px; height:80px; border:0;"/></A>

in questo:

Codice HTML:

<a href="http://mariaedoardo-edoardomaria.blogspot.com/" target="_blank" title="Queste foglie d'autunno rappresentano me, Maria, nel percorso del mio autunno."> <img src="http://mariaandmaria.altervista.org/immagini/mariaandmaria.jpg" alt="Foglie d'autunno" style="width:80px; height:80px; border:0;" /> </a>
29-06-2009, 16.03.11

Citazione:

Originalmente inviato da darkwolf

Con firefox si vede correttamente il title, con IE solo l'alt :???:
Prova a cambiare questo:

Codice HTML:

<A href="http://mariaedoardo-edoardomaria.blogspot.com/"target="_blank" title="Queste foglie d'autunno rappresentano me, Maria, nel percorso del mio autunno."><img src="http://mariaandmaria.altervista.org/immagini/mariaandmaria.jpg" alt="Foglie d'autunno" style="width:80px; height:80px; border:0;"/></A>

in questo:

Codice HTML:

<a href="http://mariaedoardo-edoardomaria.blogspot.com/" target="_blank" title="Queste foglie d'autunno rappresentano me, Maria, nel percorso del mio autunno."> <img src="http://mariaandmaria.altervista.org/immagini/mariaandmaria.jpg" alt="Foglie d'autunno" style="width:80px; height:80px; border:0;" /> </a>

Grazie Darkwolf,
non è cambiato nulla, ma non importa, io ho imparato qualcosa e se inserirò
delle immagini eseguirò i passaggi giusti e i browser visualizzeranno al loro modo.

Scusa tanto, saluti
Maria
29-06-2009, 17.20.29
alemoppo

Citazione:

Originalmente inviato da mariaandmaria

non è cambiato nulla, ma non importa, io ho imparato qualcosa e se inserirò
delle immagini eseguirò i passaggi giusti e i browser visualizzeranno al loro modo.

:shock:Come non è cambiato nulla ???

{a me funziona.}

Ti riferisci che non è cambiato il codice o il risultato??

Il codice è cambiato, ed è cambiato anche il risultato :wink:
Infatti per IE ha messo l'alt {IE interpreta l'alt}, mentre per gli altri il title, no??

Ciao!
29-06-2009, 21.59.22

[QUOTE=alemoppo;674992]:shock:Come non è cambiato nulla ???

{a me funziona.}

Ti riferisci che non è cambiato il codice o il risultato??

Il codice è cambiato, ed è cambiato anche il risultato :wink:
Infatti per IE ha messo l'alt {IE interpreta l'alt}, mentre per gli altri il title, no??

Alemoppo, intendevo dire che si vede solo l'ALT, ma io uso solo IE, per gli altri browser non mi sono ancora organizzata. Per la verità non sò come si fà.
Un pò stupida vero??:?::incavolat

Saluti
Maria

Visualizza 50 messaggi di questa discussione su una pagina