Bildlink: Anleitung, selber machen, Tipps

Bildlink machen

Wie kann man Bilder als Link machen?

Wählen Sie aus :
-1.- Ein Bild als Link.
-2.- Ein Bild erscheint beim drüberfahren mit der Maus.
-3.- Ein Bild ändert sich beim Drüberfahren mit der Maus.
-4.- Ein Bild ändert sich beim Drüberfahren mit der Maus.

-1.- Ein Bild als Link verwenden.

Öffnen Sie Ihre Datei mit einem Text-Editor.

Kopieren Sie folgenden Code :

<A HREF="LINK.html"><img src="IHR-BILD.jpg" width="50" heigth="50" border="0" alt="IHR-BILDBESCHREIBENDER-TEXT" align="left" hspace="5" vspace="5"></A>

Fügen Sie den Code in den Body-Bereich, also zwischen <body> und </body> Ihrer Homepage ein.

Ändern Sie die Angabe LINK.html in den Namen der Datei, wohin Sie verlinken wollen.

Ändern Sie die Angabe IHR-BILD.jpg in die Bilddatei, die Sie verwenden wollen.

Ändern Sie die Angabe 50 in width="50", um die Breite Ihres Bildes zu bestimmen.

Ändern Sie die Angabe 50 in height="50", um die Höhe Ihres Bildes zu bestimmen.

Ändern Sie die Angabe 0 in border="0", um die Breite des Rahmens zu ändern. Bei border="0" haben Sie gar keinen Rahmen.

Ändern Sie die Angabe IHR-BILDBESCHREIBENDER-TEXT in alt="IHR-BILDBESCHREIBENDER-TEXT", um Ihren Text für die Bildbeschreibung einzugeben.

Wenn Sie die Angabe align="left" stehen lassen, ist das Bild links und der Text rechts neben dem Bild dargestellt und umfliesst das Bild.

Wenn Sie die Angabe left in align="left" durch right ersetzen, fliesst der Text links von dem Text.

Wenn Sie die Angabe 5 in hspace="5" in eine andere Zahl ändern, ändert sich der Abstand zu anderen Elementen rechts und links vom Bild.

Wenn Sie die Angabe 5 in vspace="5" in eine andere Zahl ändern, ändert sich der Abstand zu anderen Elementen unterhalb und unterhalb vom Bild.

Speichern Sie die Datei ab.

-2.- Ein Link mit Bild beim Drüberfahren mit der Maus.

LINK

Öffnen Sie Ihre Datei mit einem Text-Editor.

Kopieren Sie folgenden Code :

<SCRIPT>
var thumb = null;function showThumbnail(which,e){thumb = document.getElementById('thumb');if( thumb && thumb.style.visibility == 'hidden' ){thumb.style.left = e.pageX ? pageXOffset + e.clientX + 20 : document.body.scrollLeft + e.x + 20;thumb.style.top = e.pageY ? pageYOffset + e.clientY : document.body.scrollTop  + e.y; thumb.style.visibility = 'visible';thumb.innerHTML = '<img src="' + which + '">'; } } function closeThumbnail() {if( thumb ) thumb.style.visibility = 'hidden';}
</SCRIPT>

Fügen Sie den Code in den Head-Bereich, also zwischen <head> und </head> Ihrer Homepage ein.

Kopieren Sie folgenden Code :

<DIV id=thumb style="VISIBILITY: hidden;POSITION: absolute"></DIV>
<A onmouseover="showThumbnail('IHR-BILD.jpg',event)" onmouseout=closeThumbnail() href="LINK.html" target=_blank>LINK</A>

Fügen Sie den Code in den Body-Bereich, also zwischen <body> und </body> Ihrer Homepage ein.

Ändern Sie die Angabe LINK.html in den Namen der Datei, wohin Sie verlinken wollen.

Ändern Sie die Angabe LINK in dem Text, der auf dem Link stehen soll.

Ändern Sie die Angabe IHR-BILD.jpg in den Namen der Bild-Datei.

Entfernen Sie die Angabe target=_blank, wenn der Link nicht in einem neuen Browserfenster öffnen soll.

Speichern Sie die Datei ab.

-3.- Ein Bild ändert sich beim Drüberfahren mit der Maus.

LINK

Öffnen Sie Ihre Datei mit einem Text-Editor.

Kopieren Sie folgenden Code :

<SCRIPT language=JavaScript>
<!--
  Normal1 = new Image();
  Normal1.src = "IHR-BILD.jpg"; /* die Grafik */
  Highlight1 = new Image();
  Highlight1.src = "IHR-NEUES-BILD.jpg"; /* die erscheinende neue Grafik */
function Bildwechsel(Bildnr,Bildobjekt)
  {
   window.document.images[Bildnr].src = Bildobjekt.src;
  }
 //--></SCRIPT>

Fügen Sie den Code in den Head-Bereich, also zwischen <head> und </head> Ihrer Homepage ein.

Ändern Sie die Angabe IHR-BILD.jpg in den Namen Ihres Bildes.

Ändern Sie die Angabe IHR-NEUES-BILD.jpg in den Namen Ihres erscheinenden Bildes.

Kopieren Sie folgenden Code :

<A onmouseover=Bildwechsel(0,Highlight1) onmouseout=Bildwechsel(0,Normal1) href="LINK.html">
<IMG src="IHR-BILD.jpg" width=10 height="10" border="0"> LINK</A>

Fügen Sie den Code in den Body-Bereich, also zwischen <body> und </body> Ihrer Homepage ein.

Ändern Sie die Angabe 0 in (0,Highlight1) und (0,Normal1) um, wenn das Linkbild nicht das erste Bild in der gesamten Datei ist. Alle Bilder, nicht nur die des scripts werden beginnend bei 0 durchnummeriert.

Ändern Sie die Angabe LINK.html in Ihren Link um.

Ändern Sie die Angabe IHR-BILD in IHR-BILD.jpg in Ihr Bild um.

Ändern Sie die Angabe 10 in width=10 height="10", um die Höhe und Breite Ihres Bildes anzugeben.

Ändern Sie die Angabe 0 in border="0", um die Breite des Bildrahmens zu ändern.

Ändern Sie die Angabe LINK in Ihren Linktext um.

Speichern Sie die Datei ab.

-4.- Ein Bild ändert sich beim Drüberfahren mit der Maus.

Öffnen Sie Ihre Datei mit einem Text-Editor.

Kopieren Sie folgenden Code :

<a href="LINK.html"><img src="IHR-BILD1.jpg" onMouseOver="src='IHR-BILD2.jpg'" onMouseOut="src='IHR-BILD1.jpg'"
border="0"></a>

Fügen Sie den Code in den Body-Bereich, also zwischen <body> und </body> Ihrer Homepage ein.

Ändern Sie die Angabe LINK.html in Ihren Link um.

Ändern Sie die Angabe IHR-BILD1 in IHR-BILD.jpg in Ihr Bild um.

Ändern Sie die Angabe IHR-BILD2 in Ihr Bild, das erscheint, wenn man mit der Maus drüber fährt.

Speichern Sie die Datei ab.

Bildlink verwenden

Wofür kann man Bildlinks verwenden?

Verwendung für die Homepage

Linkliste machen

Bildlink

!!! Versuchen Sie auch mal das schnelle Praxislexikon!