mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 21:53 Benutzername: Passwort: Auto-Login

Thema: bildvorschau bei link vom 23.10.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> bildvorschau bei link
Autor Nachricht
cc79
Threadersteller

Dabei seit: 23.10.2009
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Fr 23.10.2009 13:32
Titel

bildvorschau bei link

Antworten mit Zitat Zum Seitenanfang

Hi Leute,

bin ganz neu hier. Ich bastele gerade eine Webseite in html und css auf der wenn man über die Links geht neben dem entsprechenden link ein kleines beispiel bild erscheinen soll. Hat jemand dafür eine lösung?

Vielen Dank im vorraus.

Claire
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 23.10.2009 13:44
Titel

Antworten mit Zitat Zum Seitenanfang

das könntest du schon alleine mittels CSS realisieren.

Gib dem Hover des Links ein Hintergrundbild und verschiebe den Link mittels Paddingwerten.
Wenn du nicht willst das der Link 'Springt' dann mußt du den paddingwert vorher schon vergeben.

Ungefähr so

Code:
a {
 padding-left:1.25em;
}

a:hover {
  padding-left:1.25em;
  background:transparent url(foobar.jpg) 0% 0% no-repeat;
}


Der Paddingwert muß mind die Größe deines Bildes betragen.


Zuletzt bearbeitet von Kash am Fr 23.10.2009 13:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
cc79
Threadersteller

Dabei seit: 23.10.2009
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Fr 23.10.2009 13:50
Titel

Antworten mit Zitat Zum Seitenanfang

Ups das hatte ich vergessen. Ich habe da schon ein anderes hintergrund bild drin. Außerdem soll es bei jedem link immer ein anderes sein und ich habe 30 links. Danke für die schnelle Antwort.

Zuletzt bearbeitet von cc79 am Fr 23.10.2009 13:54, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 23.10.2009 13:53
Titel

Antworten mit Zitat Zum Seitenanfang

du kannst deinem link auch mehrere Klassen vergeben.

Code:
.foo {
 /* do something */
}

.bar {
  /* do something */
}


Code:

<a class="foo bar">&nbsp;</a>


Besser wäre bei Deinem Problem zu wissen was Du eigentl realisieren möchtest.
Das ist mir nicht ganz klar. Kannst Du das anhand einer Skizze erklären?
  View user's profile Private Nachricht senden
cc79
Threadersteller

Dabei seit: 23.10.2009
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Fr 23.10.2009 14:02
Titel

Antworten mit Zitat Zum Seitenanfang

Hier mal eine Skizze. Ich hoffe die hilft. Lächel

http://img200.imageshack.us/img200/627/skizzey.jpg
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 23.10.2009 14:57
Titel

Antworten mit Zitat Zum Seitenanfang

Folgend eine Lösung.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   xml:lang="de" lang="de">
<head>
   <title>test</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css" media="screen">
      #links, #linkimg {
         float:left;
         margin-left:1.25em;
      }
      #linkimg > img {
         display:none;
      }
   </style>
   <script type="text/javascript">
   <!--
      function zeigeBild(id) {
         id = parseInt(id);
         var idimg = "i" + id;
         document.getElementById(idimg).style.display = "block";
         return;
      }
      
      function versteckeBild(id) {
         id = parseInt(id);
         var idimg = "i" + id;
         document.getElementById(idimg).style.display = "none";
         return;
      }
   //-->
   </script>
</head>
<body>
<div id="links">
   <a href="#" onMouseOver="zeigeBild(1)" onMouseOut="versteckeBild(1)">link 1</a><br />
   <a href="#" onMouseOver="zeigeBild(2)" onMouseOut="versteckeBild(2)">link 2</a><br />
   <a href="#" onMouseOver="zeigeBild(3)" onMouseOut="versteckeBild(3)">link 3</a><br />
   <a href="#" onMouseOver="zeigeBild(4)" onMouseOut="versteckeBild(4)">link 4</a><br />
</div>
<div id="linkimg">
   <img id="i1" src="img/img1.jpg" alt="" title="" />
   <img id="i2" src="img/img2.jpg" alt="" title="" />
   <img id="i3" src="img/img3.jpg" alt="" title="" />
   <img id="i4" src="img/img4.jpg" alt="" title="" />
</div>
<br style="clear:left;" />
</body>
</html>


Wobei das jetzt nicht die optimalste Lösung ist.

Aber ich habe es Dir mal so zusammengestellt damit Du verstehst was dort passiert.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Abweichende Bildvorschau
flash bildvorschau vorlage?
css > link ...
[js] Link ändern
marquee als link?
link in sidebar
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.