mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 09:51 Benutzername: Passwort: Auto-Login

Thema: Bildwechsel mit css - lässt sich da ein Link einbauen? vom 18.03.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bildwechsel mit css - lässt sich da ein Link einbauen?
Autor Nachricht
tornadorot
Threadersteller

Dabei seit: 13.03.2009
Ort: schönste Stadt der Welt
Alter: -
Geschlecht: Weiblich
Verfasst Mi 18.03.2009 10:45
Titel

Bildwechsel mit css - lässt sich da ein Link einbauen?

 Antworten mit Zitat Zum Seitenanfang
Liebe Leute,

ich habe einen Image-Rollover mit CSS erstellt. Das klappt auch gut, nun möchte ich aber dieses Bild auch als Link verwenden - und zwar, ohne einen extra Textlink einbauen zu müssen. Geht das überhaupt, nur mit CSS und html? Der Link im Quelltext ist ja schon mit dem Wechsel besetzt...

Aus ganz frühen Dreamweaver-Zeiten erinnere ich noch dunkel, dass man eine Imagemap über Bilder legen konnte. Möchte aber gerne auf DV verzichten. Zurzeit mache ich alles per Hand, mit Coda.

Hier ist mein Quelltext:

Code:

<style type="text/css">
  #wechsel a {
    background: url(image01.jpg) no-repeat;
    display:block; width:300px;
  }
  #wechsel img {
    display:block; width:300px; height:225px; border:0;
  }
  #wechsel a:hover img {
    visibility: hidden;
 
</style>

<p id="wechsel">
  <a href="#wechsel"><img src="image02.jpg" alt="Image 02" /></a>
</p>


Im Netz habe ich nach Hinweisen geschaut, lande aber immer wieder bei Galerien (die mit Thumbs arbeiten, über die verlinkt wird) oder bei Menues (wo der betreffende Link über den Menuetext eingefügt wird). * Keine Ahnung... *

Würd mich freuen, wenn ihr einen Hinweis für mich habt!

Vielen Dank, und viele Grüße vom

tornadorot



[edit]
Bitte BB-Code aktivieren.

Zuletzt bearbeitet von Smooth-Graphics am Do 19.03.2009 16:21, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
vecto

Dabei seit: 04.06.2007
Ort: Würzburg
Alter: 37
Geschlecht: Männlich
Verfasst Mi 18.03.2009 11:04
Titel

Antworten mit Zitat Zum Seitenanfang
http://aktuell.de.selfhtml.org/artikel/css/mouseover/
  View user's profile Private Nachricht senden
Anzeige
Anzeige
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Mi 18.03.2009 11:11
Titel

Antworten mit Zitat Zum Seitenanfang
[edit]
Verschoben von Programmierung nach Allgemeines - Nonprint.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
tornadorot
Threadersteller

Dabei seit: 13.03.2009
Ort: schönste Stadt der Welt
Alter: -
Geschlecht: Weiblich
Verfasst Mi 18.03.2009 11:23
Titel

Antworten mit Zitat Zum Seitenanfang
Ooops habe gerade den Hinweis gelesen... CSS und HTML sind keine Programmiersprachen... sorry...
  View user's profile Private Nachricht senden
denise2302

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Do 19.03.2009 15:39
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
#wechsel a {
background: url(image01.jpg) no-repeat;
display:block; width:300px;
}

#wechsel a:hover {
background: url(image02.jpg) no-repeat;
}

gibt noch schickere varianten, wo du alle beiden bilder in einem hast und beim hover das hintergrund bild einfach verschiebst, so mach ichs immer... google einfach mal *zwinker* aber versuchs damit, so is der link wieder frei

link dann:
Code:
<a id="wechsel" href="adresse">&nbsp;</a>


[edit]
Bitte [code]-Tags verwenden.

Zuletzt bearbeitet von Smooth-Graphics am Do 19.03.2009 16:22, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
sjalf

Dabei seit: 21.04.2008
Ort: Berlin
Alter: -
Geschlecht: -
Verfasst Do 19.03.2009 15:49
Titel

Antworten mit Zitat Zum Seitenanfang
Einfach dem <a> nen anderes href geben würd es auch tun ... das CSS-#wechsel bezieht sich auf die id vom <p>, nicht auf das href vom <a>.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
tornadorot
Threadersteller

Dabei seit: 13.03.2009
Ort: schönste Stadt der Welt
Alter: -
Geschlecht: Weiblich
Verfasst Do 19.03.2009 19:19
Titel

Antworten mit Zitat Zum Seitenanfang
@ Denise: Danke! So hats geklappt. Ich habe leider vorher nich dran gedacht, dass ich mehrere solcher Bildwechsel-Bilder auf einer SEite haben will - das haut dann mit dem Quellcode nicht hin (css ist ja immer mit [b]einem[/b] hover und [b]einem[/b] background verbunden. Müsste dann also für jeden Wechsel eine neue Anweisung schreiben, und das hat parallel nich geklappt (Firefox z.B. zeigt dann nur statische Bilder an).

Mh, muss wohl doch mal nach Java googlen.

Vielen Dank für Eure Hilfe!
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 19.03.2009 21:10
Titel

Antworten mit Zitat Zum Seitenanfang
tornadorot hat geschrieben:
Mh, muss wohl doch mal nach Java googlen.


Lieber mal nach Javascript, ich denke das meinst du oder? *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [GIF] Nach Bildwechsel anderer Link einpflegen?
QR-Code lässt sich nicht in Indesign einbauen
508 Link valide einbauen
link in flash einbauen
Wie kann ich in Flashseiten einen Link einbauen?
htaccess Schutz, Login Daten im Link einbauen?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB