Afbeelding vóór e-mailadres met behulp van Before

[Wigi]

Hoi allen

Ik zet een eigen e-mailadres op mijn site met HTML, maar net daarvoor in de zin zou ik een afbeelding willen tonen van bijvoorbeeld een kleine enveloppe. Ik weet dat dit met Before kan in CSS, en dat lukt gedeeltelijk: ik krijg het gedaan met tekst, maar ik kan geen afbeelding gebruiken ipv. tekst. De afbeelding staat in een mapje op de harde schijf.

Weet er iemand hoe dit moet? Bedankt alvast.

Laat het weten als ik meer info moet geven.

Wigi

 

[defietser]

wigi,
uw afbeelding moet op uw host staan uploaden dus naar uw site!!
groetjes
defietser

 

[Egel]

<img src="envelopje.gif"> <a href="mailto:~~@~~.nl">email</a>

Toch? Wat ook kan:

<span style="font-family: Wingdings;">+</span> <a href="mailto:~~@~~.nl">email</a>

Vr.Gr. Egel.

 

[Wigi]

wigi,
uw afbeelding moet op uw host staan uploaden dus naar uw site!!
groetjes
defietser

ook locaal werkt het niet

Ik denk dat de fout gewoon zit bij de code.

Bedankt.

 

[Wigi]

<img src="envelopje.gif"> <a href="mailto:~~@~~.nl">email</a>

Toch? Wat ook kan:

<span style="font-family: Wingdings;">+</span> <a href="mailto:~~@~~.nl">email</a>

Vr.Gr. Egel.

Egel, die ga ik morgen uitproberen, nu is het iets te laat geworden. (alweer )

Bedankt alvast

Wigi

 

[Wigi]

Egel, die ga ik morgen uitproberen

Dit werkt inderdaad, maar ik zou het liever automatisch hebben. Nu moet ik die code van de afbeelding zetten voor elk emailadres.

Ik heb gelezen dat je in CSS een pseudo-selector kan gebruiken zoals Before en After. Er komt dan automatisch tekst of een afbeelding vóór of achter iets anders. Voor tekst lukt me dat, maar niet voor een afbeelding.

Het is dus de bedoeling dat er automatisch een kleine afbeelding verschijnt voor mijn emailadres.

Iemand die het met deze info wel kan?

Wigi

 

[MCA90]

De oplossing:

<style>
.email {
// email-settings
}
.email:before
{
content: url(http://www.w3schools.com/images/up.gif);
}
</style>

<a href="mailto:bla" class="email">bla</a>

en dan moet je bij content het adress veranderen naar je plaatje.
En dan in je a href class="email" erbij zetten.

 

[Egel]

Ah! Nu snap ik de vraag pas ...

De :before werkt bij mij niet met IE6, Fx en Opera doen 't weer wel. Op deze manier, van wikipedia afgekeken, werkt 't ook met IE:

<style type="text/css">
 a.mailto { background: url('mail_icon.gif') left center no-repeat; padding-left: 20px;};
</style>

<a class="mailto" href="mailto:~~@~~.nl">email</a>

Voordeel is ook nog dat je ipv center een percentage kunt opgeven voor de hoogte en ipv left iets als 4px kunt gebruiken. Zo kun je het envelopje precies plaatsen waar je wilt.


Vr.Gr. Egel.

 

[Wigi]

Bedankt beiden, werkt perfect! :thumb:

Wigi

 

[Wigi]

De oplossing:

<style>
.email {
// email-settings
}
.email:before
{
content: url(http://www.w3schools.com/images/up.gif);
}
</style>

<a href="mailto:bla" class="email">bla</a>

en dan moet je bij content het adress veranderen naar je plaatje.
En dan in je a href class="email" erbij zetten.

Voor de geïnteresseerden: ik heb ook deze methode uitgetest. Die van Egel werkte al. Bevindingen zijn dat dit niet in IE6 werkt, wel in Firefox. Ook krijg ik onder het envelopje mee de link zoals die ook onder het e-mailadres, maar ik vermoed dat dat simpel weg te krijgen is (ben zelf maar een leek in HTML en CSS). Ik ga dus voor de andere oplossing, niettemin bedankt!

Wigi