Frage Hyperlink mit Grafik verbinden

[kyles]

Hallo in die Runde,
ich gestalte gerade meine erste hp mit html und css und es läuft alles auch so weit super.
nun möchte ich, einen Link mit einem Vorschaubild verbinden. Wenn es geht, ohne java script nur
mittels html und css.
es sollte so wie in der Vorschau funktionieren
man berührt mit der Maus den Link und das Bild geht auf
geht es überhaupt ohne script?
würde mich über eure Hilfe sehr freuen
kyles

 

[MrMurphy]

Hallo

So eine Lösung kann nur mit HTML und CSS erstellt werden.

Allerdings sind die Möglichkeiten gegenüber JavaScript-Lösungen eher unflexibel und die notwendigen CSS-Angaben werden schnell sehr umfangreich.

Unabhängig von CSS und JavaScript bleibt die Frage, wie das ganze auf Touchscreens funktionieren soll. Die kennen schließlich keinen Hover-Effekt.

Gruss

MrMurphy

 

[kyles]

Hallo MrMurphy,
es wird ja nur eine Hobdyseite, wo ich Tutorials für Paint Shop Pro hochladen möchte.
und genau für html und css suche ich ja die Lösung
habe schon versucht über google was zu finden
aber bekomme nur Hinweise darauf wie ich ein Bild verlinken kann und wie das geht weiß ich
würde mich freuen, wenn du mir den html und css Code aufschreiben könntest

 

[SpiceLab]

Nur mal so vom Grundprinzip:

<a href="...">Linktext<img src="..." /></a>

a {
  position:relative
}
a img {
  display:none;
  position:absolute;
  top:20px;
  left:50px;
  padding:10px 30px;
  background:#123;
  border:3px solid #abc
}
a:hover img {
  display:block
}

https://jsfiddle.net/spicelab/sxmekwyk/

[edit]jsfiddle-Demo hinzugefügt[/edit]​

 

[kyles]

Daaaaanke für den Code Spicelab
genau danach habe ich gesucht
denn wie ich ein Bild als Link verwenden kann, dass habe ich schon rausgefunden
nur mit dem Bild als Vorschau, da habe ich einfach nichts im Netz gefunden
werde dir später mal eine Vorschau zeigen
noch mals gaaaanz herzlichen Dank
:):):)kyles