 Vorschau 01 (Textlink MouseOver)
Wird der Mauszeiger über den Beschreibungstext (Link) bewegt, wird die entsprechende Grafik angezeigt, erst ein Klicken auf den Link öffnet dann die entsprechende HTML-Datei.
|
|
MouseOver zeigt vor dem Klicken eine Hinweisgrafik an
update 08.02.2009 12:00 Uhr, Anzeigebereich, Textlinks und Bilddarstellung CSS-formatiert
Die Einsatzbereiche sind vielfältig
Bedingung für eine verzerrungsfreie Ansicht der großen Grafik ist: Die Großansichten sollten alle gleich groß sein! Die Textlinks, Abstände und Ränder für die Bildelemente sind nach meinem Update nun durch CSS-Anweisungen festgelegt.
a Visualisierung von (Webseiten)Rubriken-Themen
Als Startseite mit Verweisen für Unterrubriken eines Projekts wäre dises Scriptbeispiel ganz gut geeignet. Ich habe hier einmal ein Beispiel aus der Dienstleistungsbranche genommen. Die Grafik dient der Visualisierung der Service-Bereiche.
|
Unsere Service-Bereiche
|
|
 |
Sobald der Mauszeiger über den Text-Verweis bewegt wird, wird die Funktion 'Tauschen()' aufgerufen und im Script vorgegebene Grafik angezeigt. Bei MouseOut bleibt die zuletzt angezeigte Grafik sichtbar. Erst durch Klicken wird die im Link notierte HTML-Seite geöffnet.
b Bild-Vorschau von Webseitenrubriken
Sie können dieses Script ebenso als Vorschau für eine Fotogalerie einsetzten. Dabei würde ein Link als Beschreibungstext für die Unterrubriken dienen. Eine optische Aufwertung für die Startseite.
Wenn das Beispiel lediglich als abgespeckte Version für eine Bildvorschau dienen soll, kann die Option beim Klicken eine Aktion auszuführen evtl. entfallen oder anders belegt werden.
|
Meine Fotogalerien
|
|
 |
Sobald der Mauszeiger über den Text-Verweis bewegt wird, wird die vorgegebene Grafik angezeigt. Bei MouseOut bleibt die zuletzt angezeigte Grafik sichtbar. Erst durch Klicken wird die im Link notierte HTML-Seite geöffnet.
Bedingung für eine verzerrungsfreie Ansicht der großen Grafik ist: Die Großansichten sollten alle gleich groß sein! Die Abstände und Ränder für die Bildelemente sind nach meinem Update nun durch CSS-Anweisungen festgelegt.
Dateiaufruf beim Klicken
Bei MouseOver wird die Großansicht angezeigt, klicken öffnet hier eine HTML-Datei! Das ist so, weil in dem Link-Attribut ein echtes Verweisziel eingetragen wurde.
<a href="dateiname.htm" onMouseOver=" ...
Möchten Sie aus irgendwelchen Gründen beim Anklicken keine Aktion ausführen, können Sie das natürlich ändern:
<a href="javascript:void(0)" onMouseOver=" ...
 siehe auch: mehrere Links tauschen ein Objekt (JavaScript)
Aufwand
- JavaScript im HEAD-Bereich notieren
- Pfad und Dateiname der Vorschaubilder eintragen
- Bild im Body-Bereich mit dem Attribut "name" versehen
- Links mit MouseOver-Attributen versehen
- Pfad und Dateiname für verlinkte HTML-Seiten eintragen
1 Script im Head
<script type="text/javascript" language="JavaScript">
<!-- begin
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();
bild1.src = "bild1.gif";
bild2.src = "bild2.gif";
bild2.src = "bild3.gif";
function Vorschau(VorschauGrafik)
{
eval("document['picture'].src = " + VorschauGrafik + ".src");
}
// end -->
</script>
2 Notierungen im BODY-Bereich
<a href="gross1.htm" onMouseOver="Vorschau('bild1')">Foto 1<a>
<a href="gross2.htm" onMouseOver="Vorschau('bild2')">Foto 2<a>
<a href="gross3.htm" onMouseOver="Vorschau('bild3')">Foto 3<a>
<img name=picture src="startbild.gif" width=128 height=128 border=0>
Die HTML-Dateien können natürlich auch in einem Frameset oder in einem neuen Browserfenster geöffnet werden. Dazu versehen Sie den Link mit einem Target-Attribut:
<a target="name" href="gross1.htm" ... (im Frame)
<a target="_blank" href="gross1.htm" ... (im neuen Fenster)
Verwendete Variablen im Script:
| Element |
Beispiel |
|
| Variablenname 1 |
bild1 |
Text |
| Variablenname 2 |
bild2 |
Text |
| Variablenname 3 |
bild3 |
Text |
 (analog für weitere Vorschaubilder) |
| Vorschaubild 1 |
bild1.gif |
Dateiname |
| Vorschaubild 2 |
bild2.gif |
Dateiname |
| Vorschaubild 3 |
bild3.gif |
Dateiname |
| (analog für weitere Vorschaubilder) |
| Bildname |
picture |
Text |
3 CSS-Notierungen im Head-Bereich
Durch mein Update (Anzeigebereich, Links und Bilddarstellung CSS-formatiert) sind nun CSS-Angaben im Head notwendig. Zur Zuordnung der Formatierungen haben die Elemente der Darstellung eine entsprechnde ID und Namen der Unterklassen erhalten.
<style type="text/css">
<!--
/* gesamter Bereich (Tabelle) */
#Vorschau {
padding: 0px;
background: #FFFFFF;
border:none;
}
/* große Grafik */
#Vorschau .Bild{
float: left;
background: #FFFFFF;
border: 9px solid #8F8F8F;
margin: 2px 10px 2px 2px;
}
/* kleine Grafiken */
#Vorschau .Mini{
background: #FFFFFF;
border: 1px solid #3F3F3F;
margin: 2px 1px 2px 1px;
}
#Vorschau .Titel{
padding-left: 10px;
margin-bottom: 16px;
font-size:16px;
font-family:Verdana,Tahoma,Arial,sans-serif;
color:#8F8F8F;
line-height: 1.6em;
text-align: left;
}
/* für die Links */
#Vorschau ul {
list-style: none;
width: 200px;
margin: 10px 0 10px 0;
padding: 0;
font-size: 1.1em;
background-color:#FAFAFA;
}
#Vorschau li {
margin-bottom: 2px;
}
#Vorschau li a {
width: 200px;
font-size:12px;
font-weight: normal;
height: 18px;
text-decoration: none;
color: #68A8B8;
display: block;
padding: 3px 0 3px 10px;
margin-left:5px;
}
#Vorschau li a:visited {
width: 200px;
font-size:12px;
font-weight: normal;
height: 18px;
text-decoration: none;
color: #68A8B8;
display: block;
padding: 3px 0 3px 10px;
margin-left:5px;
}
#Vorschau li a:hover {
width: 200px;
font-size:12px;
font-weight:normal;
height: 18px;
text-decoration:none;
padding: 3px 0 3px 10px;
background-color:#EAF2F6;
color: #000000;
margin-left:5px;
}
-->
</style>
|
Home • Bilder • Bildvorschau 01
DOWNLOAD
Demo