|
 
Ein Alt - Tag mit JavaScript
Wollten Sie schon einmal ein Bild mit einem alternativen Text versehen
und dabei noch Absätze einfügen, Schriftfarben verändern
und verschiedenen anderen Optionen? Hier erhalten Sie eine Anleitung,
wie Sie das machen. Der Code wird kompliziert sein, doch die wichtigsten
Teile werden Ihnen praxisnah erklärt.
1. Alt - Tag, der Normale
Hier ein ganz normaler Alt - Tag
2. Alt - Tag, unser Ziel
Ein Alt - Tag mit JavaScript
Quellcode für dieses Beispiel
Die wichtigen Bereiche werden erklärt
Header der Datei
<html>
<head>
<title>Ein etwas anderer ALT - Tag .........</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
JavaScriptCode mit Einstellungen
Hier können Sie Einstellungen, wie Farbe und Schrift treffen.
<SCRIPT type=text/javascript>
if (!document.getElementById) {
if(!document.all) {
if(!document.layers) {
event = "";
}
}
}
function hideTip() {} // avoid errors until loaded
var tooltip;
function doTooltip(evt,txt) {
if (!tooltip) return;
var cntnt = wrapTip(txt);
goTooltip(evt,cntnt);
}
function wrapTip(txt) {
var cntnt = "";
if (document.layers) {
cntnt = '<table bgcolor="' + tipBorderColor + '" width="'
+ tipWidth + '" cellspacing="0" cellpadding="'
+ tipBorderWidth + '" border="0"><tr><td><table
bgcolor="' + tipBgColor + '" width="100%" cellspacing="0"
cellpadding="' + tipPadding + '" border="0"><tr><td><div
style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize
+ '; color:' + tipFontColor + ';">' + txt + '</div></td></tr></table></td></tr></table>';
} else cntnt = txt;
return cntnt;
}
var tipFollowMouse = true;
var tipWidth = 150;
var tipOffX= 8;
var tipOffY= 12;
var tipFontFamily = "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "9px";// Schriftgröße in Punkt
& Pixel (pt or px)
var tipLineHeight= 1.2;// number(recommend 1 to 1.3)
var tipFontColor = "#000000"; // Schriftfarbe
var tipBgColor = "#fef4f4";// tooltip Hintergrundfarbe
var tipBgImg = "";// tooltip Hintergrundbild
var tipPadding = 2;// integer (pixel value)
var tipBorderColor = "#b90000";
var tipBorderWidth = 1; // integer (pixel value)
var tipBorderStyle = "groove";
//-->
</SCRIPT>
 ENDE
JavaScriptCode mit Einstellungen
FrontEnd
Das bekommt der User zu sehen, ein Bild mit JS.
onmouseover ="... event..' IHR TEXT
MIT FORMATIERUNGEN '
<body bgcolor="#FFFFFF" text="#000000">
<p><a
onmouseover="doTooltip(event,'<b>NEWSLETTERTREND!</b><br>Abonnieren
Sie unseren informativen Rundbrief.<br>1. informativ<br>2.
interessant<br>3. aktuell')"
onmouseout=hideTip() href="http://www.dynamic-media.de"><img
src="../../bilder/3-kasten-bg.gif" width="197"
height="207" border="1"></a>
</p>
JavaScriptCode wird aus drei Dateien geladen
Diese drei Dateien verlangen Profiwissen, um eine Erklärung
abzuliefern. Verstehen muss man di drei Dateien nicht, da alles
Wichtige oben eingestellt werden kann.
<DIV id=tipDiv
style="Z-INDEX: 1000; VISIBILITY: hidden; POSITION: absolute"></DIV>
<SCRIPT src="dw_core.js" type=text/javascript></SCRIPT>
<SCRIPT src="dw_util.js" type=text/javascript></SCRIPT>
<SCRIPT src="dw_tooltip.js" type=text/javascript></SCRIPT>
</body>
</html>
Hier nun der Code, mit dem sie richtig loslegen
können
<head>
<title>Ein etwas anderer ALT - Tag .........</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<SCRIPT type=text/javascript>
if (!document.getElementById)
{
if(!document.all) {
if(!document.layers) {
event = "";
}
}
}
function hideTip() {} // avoid errors until loaded
var tooltip;
function doTooltip(evt,txt) {
if (!tooltip) return;
var cntnt = wrapTip(txt);
goTooltip(evt,cntnt);
}
function wrapTip(txt) {
var cntnt = "";
if (document.layers) {
cntnt = '<table bgcolor="' + tipBorderColor + '" width="'
+ tipWidth + '" cellspacing="0" cellpadding="'
+ tipBorderWidth + '" border="0"><tr><td><table
bgcolor="' + tipBgColor + '" width="100%" cellspacing="0"
cellpadding="' + tipPadding + '" border="0"><tr><td><div
style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize
+ '; color:' + tipFontColor + ';">' + txt + '</div></td></tr></table></td></tr></table>';
} else cntnt = txt;
return cntnt;
}
var tipFollowMouse = true;
var tipWidth = 150;
var tipOffX= 8;
var tipOffY= 12;
var tipFontFamily = "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "9px";// string with pixels or points
(px or pt)
var tipLineHeight= 1.2;// number(recommend 1 to 1.3)
var tipFontColor = "#000000";
var tipBgColor = "#fef4f4";// tooltip background color
var tipBgImg = "";// tooltip background image
var tipPadding = 2;// integer (pixel value)
var tipBorderColor = "#b90000";
var tipBorderWidth = 1; // integer (pixel value)
var tipBorderStyle = "groove";
//-->
</SCRIPT>
<p><a
onmouseover="doTooltip(event,'<b>NEWSLETTERTREND!</b><br>Abonnieren
Sie unseren informativen Rundbrief.<br>1. informativ<br>2.
interessant<br>3. aktuell')"
onmouseout=hideTip() href="http://www.dynamic-media.de/?page=newsletter"><img
src="../bilder/3-kasten-bg.gif" width="197"
height="207" border="1"></a>
<p></p>
<DIV id=tipDiv
style="Z-INDEX: 1000; VISIBILITY: hidden; POSITION: absolute">
<SCRIPT src="dw_core.js" type=text/javascript></SCRIPT>
<SCRIPT src="dw_util.js"
type=text/javascript></SCRIPT>
<SCRIPT src="dw_tooltip.js"
type=text/javascript></SCRIPT>
</DIV>
<p><a href="http://www.dynamic-media.de/?page=homepagevorlagen">dynamic-media.de
- homepagevorlagen</a><br>
<a href="http://www.dynamic-media.de">dynamic-media.de
- startseite</a></p>
DEMONSTRATION
: HIER KLICKEN
| 
