een link plaatsen op een plaats

[geoffrey86]

ik wil met css via een x en y as coordinate een link plaatsen is dat mogelijk met css?

 

[Tha Devil]

position: absolute;
top: 10px;
left: 10px;

 

[tecsman]

@geoffrey86: is het een link in een afbeelding of is het een link in een html-element?

 

[geoffrey86]

link in een afbeelding

 

[Tha Devil]

.image-with-link
{
  background: url(afbeelding.jpg);
  width:100px;
  height: 100px; /* Of wat de width en height ook zijn van de afbeelding */
  position: relative;
}
.image-with-link a
{
  position: absolute;
  top: 10px;
  left: 10px;
}

<div class="image-with-link>
  <a href="#">Linkje</a>
</div>

SEO-technische volgens mij een heel slecht idee maar goed, alles is mogelijk.

De vraag is meer waarom je dit wilt, wat is de toepassing?

 

[csshunter]

Ja, kan in principe *); maar ik denk dat het niet persé een background-afbeelding hoeft te zijn.
't Zou bv. een logo kunnen zijn, dat naar de homepage doorlinkt.
Dan zou het bv. gewoon kunnen worden:

<div id="logo">
    <a href="index.html"><img src="images/logo.png" width="250" height="150" alt="" title="Naar homepage" /></a>
</div>

Met als css:

a img {
    border: none; /* geen lelijke border in IE7 */
    }
#logo {
    float: left;
    width: 250px;
    margin-top: 20px;
    margin-left: 30px;
    }

Wil je er een css-hover afbeelding van maken, dan kan het wel met een background-afbeelding (of met een slimme combinatie van voorgrond/background), dan hoeft er geen javascript roll-over voor gebruikt te worden.
Voor de SEO zal er in dit geval vast nog wel ergens anders (in het menu) ook een link naar de homepage staan, dus dat is dan al afgedekt.

Samengevat: van image-with-link naar link-with-image.

Met vriendelijke groet,
CSShunter
__________
PS:
Als het echt een link in een image moet zijn (ergens binnen de grenzen van een afbeelding), dan kan het met een "lege" link die de nodige breedte en hoogte heeft, plus de eigenschap {display: block;} om over dat hele oppervlakje klikbaar te zijn.
Positioneren is er dan van afhankelijk of het een voorgrond- of background-image is, en hoe de rest van de html en css in elkaar zit.

*) In de praktijk zal de <a> ook hier een {display:block} moeten krijgen, zal de absolutie positie van de <a> naar de <div> overgeheveld moeten worden (anders wordt de link uit de <div> getild, en zal de hele <a> geen oppervlak hebben), en zal het woord "Linkje" geschrapt moeten worden (anders komt dat dwars over de afbeelding te staan).