symbol "lupe" auf bild
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
anbringen
bild
code
container
datei
dokument
einarbeiten
eingebundenen grafiken
entsprechend anpassen
erstellen
grafik
jeweiligen bilder
leute
lupe
pointer
schnelle antwort
symbol
tag
url
verstehen
-
hallo, hab auf meiner seite mehrere tag/bild">bilder. funktion bild klein - wenn man draufklickt - wird bild groß. soweit so gut. problem: viele leute verstehen vielleicht nicht, dass wenn sie draufklicken, dass das bild dann groß wird. daher würde ich gerne, auf die jeweiligen bilder ein symbol anbringen (lupe, pluszeichen, ...) damit die leute das verstehen. gibt es diese möglichkeit?
wenn ja, wie kann ich das technisch lösen?
vielen dank!!!
lg
guse -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
DU könntest sowas wie Highslide nutzen. Ansonsten kannst du auch das Mauszeigerverhalten per CSS ändern:
.container img { cursor: url('http://www.michel-lefevre.com/highslide/graphics/zoomin.cur'), pointer !important;'); }
Ich hab jetzt einfach ein Bild von Google genommen. Was du aber letzlich wirklich nimmst, ist dir überlassen ;) Wichtig ist nur, dass das Element "container" existiert. Ansonsten musst du den CSS-Schnipsel entsprechend anpassen. -
In deines CSS Datei, oder du fügst in den Head deiner html Datei die tags "<style>der Code</style>" ein.
Das mit der CSS Datei ist allerdings besser^^ -
noch einfacher: füge das css direkt im img-tag ein:
<img src="..." style="cursor: url(...);">
Beitrag zuletzt geändert: 22.4.2011 13:23:25 von dermaik -
Sag und doch eien Beispielseite die das hat. Dann könne wir udn den Quelltext aunschauen udn sofort dir den Code sagen.
Vielleicht mal das probieren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript" language="JavaScript1.2"> function gross(status) { document.getElementById('bild').style.display = status } </script> </head> <body> <a href="#" onmouseOver="gross('block')" onmouseOut="gross('none')"><img src="1.gif" width=10% height=10% border=0 alt=""></a> <div id="bild" style="display : none"><img src="1.gif" width=250 height=150 border=0 alt=""></div> </body> </html>
Mfg -
Das für alle mit <img> eingebundenen Grafiken an zu wenden, ist nicht sehr empfehlenswert, da das Vergrößerungszeichen so auch bei zum Design gehörenden Grafiken gezeigt würde. Mache es so, wie Dermaik, nicht so, wie Fabo es vorgeschlagen hat. Oder du erstellst eine CSS-Klasse, dann musst du den Grafiken, die man vergrößern kann, nur noch die Klasse zuweisen, damit das Symbol gezeigt wird.
-
Hallo, mhm, aber wie genau geh ich vor wenn ich das in CSS einarbeiten will. Einfach ein neues CSS Sheet erstellen?
Beitrag zuletzt geändert: 22.4.2011 14:12:40 von guse -
guse schrieb:
Ja, entweder das, oder den CSS-Teil zwischen <style type="text/css"> und </style> direkt ins HTML-Dokument einarbeiten.
Hallo, mhm, aber wie genau geh ich vor wenn ich das in CSS einarbeiten will. Einfach ein neues CSS Sheet erstellen?
-
Ok, funzt, besten Dank!!!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
