Mouse over von Take, 16.08.2011 15:44

Mouse over

Max 16.08.2011 15:23

design/layout

Hallo zusammen,

ich habe ein Problem im Bezug auf den Mouse over Effekt. Bei dem Pop-up Fenster entsteht ein transparenter Abstand zwischen dem Textfeld und dem Rahmen des Pop-up Fensters. Könnt ihr mir sagen, wie ich dieses Problem beheben kann? Hier ist mein html-Code:

<table border="2" cellpadding="5" cellspacing="0" width="100%">
<tr>
 <td bgcolor="#C0C0C0"> Begriff </td>
 <td bgcolor="#C0C0C0"> Erläuterung (diese Beschreibung verändert sich im gesamten Fragebogen nicht)
</tr>
<tr>
 <td> Internetshop </td>
 <td> - Mo-So 0-24Uhr - Reiner Internethändler ohne Ladengeschäft - Übersichtliche und leicht zu bedienende Internetseite - Keine Versand-und Rückversandkosten</td>
</tr>
<tr>
 <td> <a onmouseover="showToolTipp('','- Mo-Sa 9-20Uhr - Stationärer Händler ohne Internetshop - Kompetentes und freundliches Personal - Fußläufig in 5 Minuten erreichbar und zahlreiche kostenlose Parkplätze','#000000','2','0','Arial','Verdana,Helvetica,Arial,sans-serif','left','left','#000000','#000000','2px','#FFFFFF','#FFFFFF','0','0','12px','12px','bold','normal','none');" onmouseout="hideToolTipp(); return true;">Ladengeschäft</a> </td>
 <td> - Mo-Sa 9-20Uhr - Stationärer Händler ohne Internetshop - Kompetentes und freundliches Personal - Fußläufig in 5 Minuten erreichbar und zahlreiche kostenlose Parkplätze</td>
</tr>
<tr>
 <td><a onmouseover="showToolTipp('','- Mo-So 0-24Uhr/Mo-Sa 9-20Uhr - Beide Kanäle mit o.g. Eigenschaften vorhanden - Gleiches Angebot in beiden Kanälen','#000000','2','0','Arial','Verdana,Helvetica,Arial,sans-serif','left','left','#000000','#000000','2px','#FFFFFF','#FFFFFF','0','0','12px','12px','bold','normal','none');" onmouseout="hideToolTipp(); return true;">Internetshop/Ladengeschäft</a> </td>

<td> - Mo-So 0-24Uhr/Mo-Sa 9-20Uhr - Beide Kanäle mit o.g. Eigenschaften vorhanden - Gleiches Angebot in beiden Kanälen
 - Beschwerden oder Rückgaben in beiden Kanälen möglich unabhängig, wo gekauft wurde</td>
</tr>
</table>

<center>Wählen Sie nun bitte durch einen Klick auf den Kreis unter der Option jene, für die Sie sich entscheiden würden!</center>

function setToolTipp (breite){
document.onmousemove = cursorMove;
if (breite && breite>20) b_Breite = breite;
ToolTipp = crossGetObject('ToolTipp');
ToolTippShow = false;
}

function showToolTipp(title,msg,rahmenfarbe,cellpadding,cellspacing,schriftartoben,schriftartunten,textrichtungoben,textrichtungunten,textfarbeoben,textfarbeunten,rahmenstaerke,bgcoloroben,bgcolorunten,rechtslinks,untenoben,schriftgroesseoben,schriftgroesseunten,fettoben,fettunten,rahmenart,breite){
var b_Back;
var relWidth, relHeight;
if (ToolTipp == null) return;
if (breite && breite>20) b_Breite = breite;
else b_Breite=500;
msg = '<table width="' + b_Breite + '" cellpadding="'+cellpadding+'" cellspacing="'+cellspacing+'" style="border:'+rahmenstaerke+' '+rahmenfarbe+' '+rahmenart+';"><tr><td style="border-bottom:'+rahmenstaerke+' solid '+rahmenfarbe+'; border-top:'+rahmenstaerke+' solid '+rahmenfarbe+'; border-left:'+rahmenstaerke+' solid '+rahmenfarbe+'; border-right:'+rahmenstaerke+' solid '+rahmenfarbe+'; padding0px; "><table width="100%" border="0" cellpadding="'+cellpadding+'" cellspacing="'+cellspacing+'"><tr><td bgcolor="'+bgcoloroben+'" align="'+textrichtungoben+'">'+title+'</th></tr></table><table width="100%" border="0" cellpadding="'+cellpadding+'" cellspacing="'+cellspacing+'"><tr><td bgcolor="'+bgcolorunten+'" align="'+textrichtungunten+'">' + msg + '</td></tr></table></td></tr></table>'
if (!dir) b_Dir = rechtslinks;
else b_Dir = dir;
relWidth = crossInnerWindowWidth()+ crossGetScroll("x") ;
relHeight = crossInnerWindowHeight() + crossGetScroll("y");
if (crossMouseX + b_Breite + mausabstand > relWidth)
{b_Dir = 1;}
else if (crossMouseX < b_Breite + mausabstand) b_Dir = 0;
b_VDir = untenoben;
if (crossMouseY + 65 > relHeight) b_VDir = 1;
else if (crossMouseY - 65 < 0) b_VDir = 0;
crossWrite(ToolTipp, msg);
ToolTippShow = true;
crossShowObject(ToolTipp);
}

function hideToolTipp(breite) {
if (ToolTipp == null) return;
crossHideObject(ToolTipp);
ToolTippShow=false;
crossMoveTo(ToolTipp, -500, 0);
}

function cursorMove(e) {
var posX, posY;
crossMousePosition(e);

if(ToolTippShow){  
	if(b\_Dir==0){  
		posX = crossMouseX + mausabstand;  
		if (b\_VDir==0) {posY = crossMouseY + mausabstand;}  
		else {posY = crossMouseY - 65;}  
	}else{  
		posX = crossMouseX-b\_Breite-mausabstand;  
		if (b\_VDir==0) {posY = crossMouseY + mausabstand;}  
		else {posY = crossMouseY - 65;}  
	}  
	crossMoveTo(ToolTipp, posX, posY)  
}

}

var B_Type = new crossBrowserType();
function crossBrowserType() {
this.IE = false;
this.NS4 = false;
this.NS6 = false;
this.id = "";

if (document.all) {this.IE = true; this.id = "IE";}  
else if (document.getElementById) {this.NS6 = true; this.id = "NS6";}  
else if (document.layers) {this.NS4 = true; this.id = "NS4";}

}

var crossMouseX, crossMouseY;
if (B_Type.NS4) document.captureEvents(Event.MOUSEMOVE);

function crossMousePosition(e) {
if (B_Type.IE) {
crossMouseX=event.x + document.body.scrollLeft;
crossMouseY=event.y + document.body.scrollTop;
}
else {crossMouseX=e.pageX; crossMouseY=e.pageY;}
}

function crossGetObject(id) {
var obj = null;
if (B_Type.IE) obj=document.all[id];
else if (B_Type.NS6) obj=document.getElementById(id);
else if (B_Type.NS4) obj=document.layers[id];
return obj;
}

function crossWrite(obj, text) {
if (B_Type.IE) obj.innerHTML = text;
else if (B_Type.NS6) obj.innerHTML = text;
else if (B_Type.NS4){
obj.document.open();
obj.document.write(text);
obj.document.close();
}
}

function crossInnerWindowWidth() {
var val;
if (B_Type.IE) val=document.body.clientWidth;
else if (B_Type.NS6) val=window.innerWidth;
else if (B_Type.NS4) val=window.innerWidth;
return val;
}

function crossOuterWindowWidth() {
var val;
if (B_Type.IE) val=document.body.offsetWidth;
else if (B_Type.NS6) val=window.outerWidth;
else if (B_Type.NS4) val=window.outerWidth;
return val;
}

function crossInnerWindowHeight() {
var val;
if (B_Type.IE) val=document.body.clientHeight;
else if (B_Type.NS6) val=window.innerHeight;
else if (B_Type.NS4) val=window.innerHeight;
return val;
}

function crossShowObject(obj) {
if (B_Type.IE || B_Type.NS6) {obj.style.visibility="visible";}
else if (B_Type.NS4) {obj.visibility="show";}
}

function crossHideObject(obj) {
if (B_Type.IE || B_Type.NS6) {obj.style.visibility="hidden";}
else if (B_Type.NS4) {obj.visibility="hide";}
}

</script>

</head>
<body onload="setToolTipp();">
<div name="ToolTipp" id="ToolTipp" style="POSITION:absolute; VISIBILITY:hidden; LEFT:-200px; Z-INDEX: 100"></div>
<body>

</body>

Beitrag melden

– Informationen zu den Bewertungsregeln

Mouse over
Take Homepage des Autors 16.08.2011 15:44

design/layout
– Informationen zu den Bewertungsregeln
Moin,

Hier ist mein html-Code:

Das ist kein HTML. Das hat vielleicht (mit viel Fantasie) ein wenig Ähnlichkeit, aber es ist trotzdem keins. HTML dient zur semantischen Auszeichnung von Text. Abgesehen davon habe ich keine Lust mir diesen hingerotzten Code lokal wieder zusammenzubasteln. Also bitte ein Online-Beispiel. Dankeschön.

Gruß,
Take
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Mouse over
  
  T-Rex 16.08.2011 17:14
  
  design/layout
  +2 Informationen zu den Bewertungsregeln
  kannst du bitte zu mir in die arbeit kommen und dass jedem hier genau so ins Gesicht sagen!! Die meisten schimpfen sich dann auch noch Webentwickler :(.
  
  Gruß
  trauriger
  T-Rex
  Beitrag melden
  
  +2
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Mouse over
    
    Ano Nym 16.08.2011 17:54
    
    design/layout
    
    – Informationen zu den Bewertungsregeln
    Guten Tag,
    
    kannst du bitte zu mir in die arbeit kommen und dass jedem hier genau so ins Gesicht sagen!! Die meisten schimpfen sich dann auch noch Webentwickler :(.
    
    Anschließend bitte zu mir! Hier hat derjenige, der für das Intranet den Hut auf hat, allenfalls marginale Ahnung von Webtechnologien - ist ja auch egal, die Leitungen sind ja dick und barrierefrei oder gar cross-Browser-kompatibel muss man in einem Unternehmensnetz ja auch nicht sein ...
    
    ... und dann hat man halt irgendwann Viewstates, die über 500 kB groß sind - und wenn der Browser dann am Röcheln ist, sind natürlich die "ganzen" Stylesheets der "Mecker-Fraktion" Schuld und man frickelt sich 'nen Wolf mit dem .NET-Theming (dass das Aussehen der Komponenten letztendlich natürlich immer noch mittels CSS gesteuert wird, man davon keine Ahnung hat und deshalb das Skin mehr oder weniger kaputtspielt und alles nur noch komplizierter macht, sei mal dahingestellt).
    
    Ano Nym
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
Mouse over
EKKi 16.08.2011 15:52

design/layout
– Informationen zu den Bewertungsregeln
Mahlzeit Max,

Bei dem Pop-up Fenster entsteht ein transparenter Abstand zwischen dem Textfeld und dem Rahmen des Pop-up Fensters.

Ich sehe da nirgends ein Pop-up-Fenster. Ich sehe da nur jede Menge uralten, nahezu antiken Code:

<table border="2" cellpadding="5" cellspacing="0" width="100%">

Eigenschaften, die die Darstellung eines Elements betreffen, setzt man heutzutage per CSS.

<tr>
 <td bgcolor="#C0C0C0"> Begriff </td>
 <td bgcolor="#C0C0C0"> Erläuterung (diese Beschreibung verändert sich im gesamten Fragebogen nicht)
</tr>

Diese ganze Zeile soll vermutlich eine Überschrift sein - wieso steht sie dann nicht in einem <thead>? Darüber hinaus gilt (in bezug auf @bgcolor, und ) natürlich wieder das oben Geschriebene.

<td> - Mo-So 0-24Uhr - Reiner Internethändler ohne Ladengeschäft - Übersichtliche und leicht zu bedienende Internetseite - Keine Versand-und Rückversandkosten</td>

Das sieht wie eine Aufzählung aus - wieso ist es also keine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste?

<td> <a onmouseover="showToolTipp('','- Mo-Sa 9-20Uhr - Stationärer Händler ohne Internetshop - Kompetentes und freundliches Personal - Fußläufig in 5 Minuten erreichbar und zahlreiche kostenlose Parkplätze','#000000','2','0','Arial','Verdana,Helvetica,Arial,sans-serif','left','left','#000000','#000000','2px','#FFFFFF','#FFFFFF','0','0','12px','12px','bold','normal','none');" onmouseout="hideToolTipp(); return true;">Ladengeschäft</a> </td>

Was hältst Du von der <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=CSS-Pseudoklasse :hover>? Außerdem gilt - wie so oft in diesen Fällen - Zitat 2002.

var B_Type = new crossBrowserType();
function crossBrowserType() {

OMG, ich ahne Schreckliches ...

this.IE = false;
this.NS4 = false;
this.NS6 = false;
this.id = "";

if (document.all) {this.IE = true; this.id = "IE";}
else if (document.getElementById) {this.NS6 = true; this.id = "NS6";}
else if (document.layers) {this.NS4 = true; this.id = "NS4";}
}

Juchuh - Recht gehabt!

Auf welcher angegammelten Festplatte hast Du denn diesen Code-Schrott gefunden?

Stell Dir selbst die Frage, wieviele Deiner Benutzer noch Netscape 4 oder Netscape 6 benutzen. Anschließend beantworte die nicht gestellte Frage, ob dieser Code restlos zu entsorgen wäre.

MfG,
EKKi

--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
Beitrag melden

–
Informationen zu den Bewertungsregeln
Mouse over
Cheatah 16.08.2011 16:04

design/layout
– Informationen zu den Bewertungsregeln
Hi,

dass Dein Code es verdient hat, ausgedruckt zu werden, um mit ihm einen umfangreichen Brennwerttest durchzuführen, wurde Dir ja schon gesagt.

<td bgcolor="#C0C0C0"> Begriff </td>
<td bgcolor="#C0C0C0"> Erläuterung (diese Beschreibung verändert sich im gesamten Fragebogen nicht)

"Begriff", "Erläuterung"? Du suchst eine Definition List (<dl>). *Nicht* vorkommen werden in Deinem HTML-Code (neben Tabellenelementen) , , , und Konsorten.

<td> <a onmouseover="showToolTipp('','- Mo-Sa 9-20Uhr - Stationärer Händler ohne Internetshop - Kompetentes und freundliches Personal - Fußläufig in 5 Minuten erreichbar und zahlreiche kostenlose Parkplätze','#000000','2','0','Arial','Verdana,Helvetica,Arial,sans-serif','left','left','#000000','#000000','2px','#FFFFFF','#FFFFFF','0','0','12px','12px','bold','normal','none');" onmouseout="hideToolTipp(); return true;">Ladengeschäft</a> </td>

Brüll. Du suchst das title-Attribut und möchtest es mit JavaScript automatisiert verwenden, um Tooltips zu erstellen. Nicht vorkommen werden in Deinem HTML-Code onmouseover und onmouseout.

<td> - Mo-Sa 9-20Uhr - Stationärer Händler ohne Internetshop - Kompetentes und freundliches Personal - Fußläufig in 5 Minuten erreichbar und zahlreiche kostenlose Parkplätze</td>

Welchen Unterschied gibt es zwischen diesem Text und dem Tooltip? Oder anders gefragt: Wieso zur Hölle baust Du da noch einen Tooltip ein?



Leere -Elemente sind nur eines: zu eliminieren.

<center>Wählen Sie nun bitte durch einen Klick auf den Kreis unter der Option jene, für die Sie sich entscheiden würden!</center>

Abgesehen davon, dass <center> dort nicht mal gültig ist, hat es in Deinem HTML-Code nichts verloren.

Zu Deinem JavaScript-Code sage ich nichts, der ist zu traurig.

</head>

War der ganze bisherige HTML-Klumpatsch etwa im <head>?

<div name="ToolTipp" id="ToolTipp" style="POSITION:absolute; VISIBILITY:hidden; LEFT:-200px; Z-INDEX: 100"></div>

Genau wie im Gespräch wird auch CSS nicht deutlicher, wenn man dabei schreit.

<body>

Was'n das? Ein Kopf, zwei Körper? Beziehungsweise genauer gesagt drei, da Du durch die Tabelle im <head> bereits implizit einen erzeugt hast.

Cheatah

--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Überflüssig
 
 Mitleser 16.08.2011 17:33
 
 meinung
 – Informationen zu den Bewertungsregeln
 1. Ja, die Referenz des OP ist gänzlich Murks.
 2. Deine Kommentare enthalten auch fachlich relevantes.
 
 Dennoch stellt sich die Frage, was Dein überwiegend polemisches Rumgeschnauze bringen soll. Dem OP tatsächlich helfen oder sollte man befürchten, dass Dir darauf einer abgeht?
 Beitrag melden
 
 –
 Informationen zu den Bewertungsregeln
 Übersicht
 
 alle Foren
 
 SELFHTML-Forum
 
 anmelden
 
 Benutzerkonto erstellen
 
 Beitrag im Thread-Baum
 1. Überflüssig
 
 Steel 17.08.2011 12:21
 
 meinung
 
 – Informationen zu den Bewertungsregeln
 Moin!
 
 Dennoch stellt sich die Frage, was Dein überwiegend polemisches Rumgeschnauze bringen soll. Dem OP tatsächlich helfen oder sollte man befürchten, dass Dir darauf einer abgeht?
 
 Praktisch waere doch, wenn beides der Fall ist.
 
 --
 Signaturen sind blöd!
 Beitrag melden
 
 –
 Informationen zu den Bewertungsregeln
 
 Übersicht
 
 alle Foren
 
 SELFHTML-Forum
 
 anmelden
 
 Benutzerkonto erstellen
 
 Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Max: Mouse over

Mouse over

Überflüssig

Mouse over

Mouse over

Mouse over

Mouse over

Mouse over

Mouse over

Überflüssig

Überflüssig