[Aerendil]

Tach zusammen, ich hätte da gerne mal ein Problem:

Ich will das beim mouseover eines Bildes Tooltip sich öffnet mit einer vergrößerten Darstellung des Bildes sowie ein popup-Link auf dem Ursprungsbild. in der Theorie ok in der Praxis naja.

Probleme: Im IE 6 geht es meist nicht - tooltip, Im Firefox 3 geht der erste Mouseover nie immer nur ein streifen beim tooltip, erst beim 2ten mouseover geht es und beim firefox 2 blinkt der tooltip.

Hier mal noch ein Link zu Verdeutlichung, was ich meine http://www.haag-marketing.de/ccs/seiten/test.html
komischerweise geht es da sogar nur so wie ich es benutzen will hier: http://www.haag-marketing.de/ccs/seiten/test2.html geht es nicht...?


Das JS Script gibt es hier http://www.walterzorn.de

und hier ist der editierbare Teil dieses Scripts, wie ich es eingestellt habe:

var config = new Object();


//=================== GLOBAL TOOLTIP CONFIGURATION =========================//
var tt_Debug = false // false or true - recommended: false once you release your page to the public
var tt_Enabled = true // Allows to (temporarily) suppress tooltips, e.g. by providing the user with a button that sets this global variable to false
var TagsToTip = true // false or true - if true, HTML elements to be converted to tooltips via TagToTip() are automatically hidden;
// if false, you should hide those HTML elements yourself

// For each of the following config variables there exists a command, which is
// just the variablename in uppercase, to be passed to Tip() or TagToTip() to
// configure tooltips individually. Individual commands override global
// configuration. Order of commands is arbitrary.
// Example: onmouseover="Tip('Tooltip text', LEFT, true, BGCOLOR, '#FF9900', FADEIN, 400)"

config. Above = false // false or true - tooltip above mousepointer
config. BgColor = '' // Background colour (HTML colour value, in quotes)
config. BgImg = '' // Path to background image, none if empty string ''
config. BorderColor = '#FFFFFF'
config. BorderStyle = 'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed'
config. BorderWidth = 1
config. CenterMouse = true // false or true - center the tip horizontally below (or above) the mousepointer
config. ClickClose = true // false or true - close tooltip if the user clicks somewhere
config. ClickSticky = false // false or true - make tooltip sticky if user left-clicks on the hovered element while the tooltip is active
config. CloseBtn = false // false or true - closebutton in titlebar
config. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colours
config. CloseBtnText = 'schließen' // Close button text (may also be an image tag)
config. CopyContent = true // When converting a HTML element to a tooltip, copy only the element's content, rather than converting the element by its own
config. Delay = 400 // Time span in ms until tooltip shows up
config. Duration = 0 // Time span in ms after which the tooltip disappears; 0 for infinite duration, < 0 for delay in ms _after_ the onmouseout until the tooltip disappears
config. Exclusive = true // false or true - no other tooltip can appear until the current one has actively been closed
config. FadeIn = 100 // Fade-in duration in ms, e.g. 400; 0 for no animation
config. FadeOut = 100
config. FadeInterval = 30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother but causes more CPU-load
config. Fix = null // Fixated position, two modes. Mode 1: x- an y-coordinates in brackets, e.g. [210, 480]. Mode 2: Show tooltip at a position related to an HTML element: [ID of HTML element, x-offset, y-offset from HTML element], e.g. ['SomeID', 10, 30]. Value null (default) for no fixated positioning.
config. FollowMouse = true // false or true - tooltip follows the mouse
config. FontColor = '#000044'
config. FontFace = 'Verdana,Geneva,sans-serif'
config. FontSize = '8pt' // E.g. '9pt' or '12px' - unit is mandatory
config. FontWeight = 'normal' // 'normal' or 'bold';
config. Height = 0 // Tooltip height; 0 for automatic adaption to tooltip content, < 0 (e.g. -100) for a maximum for automatic adaption
config. JumpHorz = true // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundary
config. JumpVert = false // false or true - jump vertically "
config. Left = false // false or true - tooltip on the left of the mouse
config. OffsetX = 0 // Horizontal offset of left-top corner from mousepointer
config. OffsetY = -50 // Vertical offset
config. Opacity = 100 // Integer between 0 and 100 - opacity of tooltip in percent
config. Padding = 0 // Spacing between border and content
config. Shadow = false // false or true
config. ShadowColor = '#C0C0C0'
config. ShadowWidth = 5
config. Sticky = false // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseout
config. TextAlign = 'left' // 'left', 'right' or 'justify'
config. Title = '' // Default title text applied to all tips (no default title: empty string '')
config. TitleAlign = 'left' // 'left' or 'right' - text alignment inside the title bar
config. TitleBgColor = '' // If empty string '', BorderColor will be used
config. TitleFontColor = '#FFFFFF' // Color of title text - if '', BgColor (of tooltip body) will be used
config. TitleFontFace = '' // If '' use FontFace (boldified)
config. TitleFontSize = '' // If '' use FontSize
config. TitlePadding = 2
config. Width = 0 // Tooltip width; 0 for automatic adaption to tooltip content; < -1 (e.g. -240) for a maximum width for that automatic adaption;
// -1: tooltip width confined to the width required for the titlebar
//======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============//


und hier der Quellcode der html-Seite

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body>
<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
<a href="javascript:void(0);" onmouseover="Tip('<img src=\'../pic/tooltip/04.jpg\' height=\'300\' border=\'0\' />')" onmouseout="UnTip()"><img src="../pic/mini/04.jpg" alt="sasas" width="105" height="70" border="0" onclick="MM_openBrWindow('04_pop.html','PopUp','width=800,height=534')" /></a>
</body>

</html>


Bin für alles offen, besonders für Hilfe, wenn es einfacher zu bedienende Scripts gibt, informiert mich bitte auch dazu, aber wenn möglich würde ich gerne bei diesem bleiben, damit ich nicht alles nochmal umbauen muss.

Bin JS-Noob daher nehmt bitte Rücksicht und erklärt mir alles als wäre ich 3 Jahre alt.

DAnke schonmal im Voraus!

[Kilian]

Hallöchen!
Ich hab mir jetzt mal den ganze Javascript-Code gar nicht erst angesehen, da es mir persönlich viel zu viel war für so eine relativ simple Sache... ich zeig dir erstmal nen kleinen Beispielcode und weiter unten geh ich auf die einzelnen Zeilen ein:

Markup:

[zweitaccount]

[Kilian]

Ich fand das immernoch leichter als zu versuchen mich in den Fremdcode da einzulesen. *grins*
Aber danke.

[Aerendil]

Hallo Ihr beiden Danke schonmal für die Hilfe.

Zweitacount - leider hat weder preload noch width etwas daran geändert - obwohl es sehr logisch klang...

Kilian dein Script ist soweit so gut - aber wie schaffe ich es dass das Ursprungsbild (im div klein)
einen popup-Link enthält der geht - geht bisher nicht und wie kann das mouseover-bild an einer
anderen Stelle erscheinen lassen, als direkt über dem Bild (wegen dem Pop-up Link)

anbei der aktuelles test-quellcode mit deiner funktion

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script language="javascript">
function versteckeGross(){
document.getElementById("gross").style.display = "none";
}

function zeigeGross(){
document.getElementById("gross").style.display = "block";
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>

<body onload="versteckeGross()">

<div id="klein" onmouseover="zeigeGross()"><a href="#"><img src="../pic/mini/anfahrt_mini.jpg" alt="Anfahrtskizze" width="200" height="218" border="0" onclick="MM_openBrWindow('anfahrt_pop.html','Anfahrt','width=596,height=650')" /></a></div>
<div id="gross" onmouseout="versteckeGross()"><img src="../pic/tooltip/03.jpg" width="449" height="300" hspace="30" vspace="100" /></div>
<style>
div {position: absolute; top: 10px; left:10px;}
#klein {width: 50px; height: 50px; z-index:10;}
#gross {width: 200px; height: 200px; max-height:300px; z-index:100;}
</style>
</body>
</html>

[Kilian]

Achso, sorry da hab ich wohl ne Kleinigkeit übersehen.

Also den großen Container kannst du frei positionieren, wie es dir beliebt. Es spielt keine Rolle wo er sich befindet.
Die Styleangaben in meinem Script bezogen sich nur auf die Testseite, die ich geschrieben hatte. Momentan steht in deinem Script immernoch die Angabe, die ich zu den DIVs gemacht hab - nämlich das absolute Positionieren in der oberen Ecke: div {position: absolute; top: 10px; left:10px;}
Diese Angabe kannst du entfernen.

Wenn die DIVs nicht übereinander angezeigt werden musst du nur eine kleine Sache ändern:
Du solltest den Aufruf onmouseout="versteckeGross()" dann mit in den kleinen Container schreiben damit der große Container ausgeblendet wird, wenn der Mauspfeil den Kleinen verlässt.

Das sieht dann in deinem Fall so aus:
<div id="klein" onmouseout="versteckeGross()" onmouseover="zeigeGross()">
<a href="#">
<img src="../pic/mini/anfahrt_mini.jpg" alt="Anfahrtskizze" width="200" height="218" border="0" onclick="MM_openBrWindow('anfahrt_pop.html','Anfahrt','width=596,height=650')" />
</a>
</div>

Es ist dabei irrelevant, was sich in dem kleinen Container befindet (also kann da auch ein Link, Text, ein Bild oder alles zusammen sein). Solang der Mauspfeil über ihm ist, wird der große Container eingeblendet und wenn der Mauspfeil den kleinen Container verlässt, wird auch das Große nicht mehr angezeigt.

Das onmouseout="versteckeGross()" kannst du dann aus dem großen DIV rausnehmen, da dieses ja ohnehin nicht mehr angezeigt wird wenn der Mauspfeil den kleinen Container verlässt.


So, ich hoffe dieses Mal funktioniert's so, wie du es dir vorgestellt hast.

p.s. Noch ein Tip für "gute Programmierung" am Rande: Die Styleangaben werden in der Regel im Kopfbereich der HTML notiert, da es bei längeren Seiten sonst zu Verwirrungen und leidlichen Suchen jeweiliger Codepassagen kommen kann.

[Aerendil]

Ja danke hat gefunzt! Heil Dir allmächtiger JS bzw. CCS Gott

[Kilian]

Hm. Diesen Eindruck wollte ich jetzt nicht vermitteln.
Aber freut mich dass ich helfen konnte.