Autor |
Nachricht |
-
deluxe-design
|
13.04.2010 um 17:46 (UTC) Titel: Code nicht für Css kompatibel? |
|
|
Hallo und zwar hab ich noch von damals einen Code gefunden den ich beim Iceblue Design benutzt hatte Jedoch mach ich jetzt Css Designs und mein Design ist auch derzeit Css, jedoch scheint der Code beim Css "Text über dem Design " nicht zu funktionieren ??
Warum ??
Was der Code bewirken soll ??
Es soll ein Bild angezeigt werden und sobalt man mit der Maus über das Bild geht erscheint eine Sprechblase mit einem Text drin
Es geht um meine Seite: www.Hotel-Habbos.de.tl
Hier der Code
Code:
<style type="text/css">
#gga{
position: absolute;
top: 100px;
left: 100px;
width: 150px;
border: 2px solid #c0c0c0;
padding: 2px;
color:black;
font-size:14px;
font-weight:550;
font-family:verdana, arial;
background-color: beige;
visibility: hidden;
z-index: 100;
/*******************Textfeld ohne Schatten : die folgende Zeile entfernen !!! ***********************/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#ecke{
position:absolute;
left: 100px;
z-index: 101;
visibility: hidden;
}
</style>
<script type="text/javascript">
var zeigerabstandX=20 // Abstand des Textfeldes vom Zeiger waagrecht
var zeigerabstandY=10 // Abstand des Textfeldes vom Zeiger senkrecht
var bildabstandX=19 // Abstand der Ecke auf dem Textfeld vom linken Rand
var bildabstandY=14// muss nicht geändert werden
document.write('<div id="gga"></div>')
document.write('<img id="ecke" src="http://img390.imageshack.us/img390/1952/arrow0xw.gif">')
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var ggl=document.all? document.all["gga"] : document.getElementById? document.getElementById("gga") : ""
var zeiger=document.all? document.all["ecke"] : document.getElementById? document.getElementById("ecke") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function umpf(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") ggl.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") ggl.style.backgroundColor=thecolor
ggl.innerHTML=thetext
enabletip=true
return false
}
}
function hallo(e){
if (enabletip){
var aarg=false
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-zeigerabstandX : winwidth-e.clientX-zeigerabstandX
var bottomedge=ie&&!window.opera? winheight-event.clientY-zeigerabstandY : winheight-e.clientY-zeigerabstandY
var leftedge=(zeigerabstandX<0)? zeigerabstandX*(-1) : -1000
if (rightedge<ggl.offsetWidth){
ggl.style.left=curX-ggl.offsetWidth+"px"
aarg=true
}
else if (curX<leftedge)
ggl.style.left="5px"
else{
ggl.style.left=curX+zeigerabstandX-bildabstandX+"px"
zeiger.style.left=curX+zeigerabstandX+"px"
}
if (bottomedge<ggl.offsetHeight){
ggl.style.top=curY-ggl.offsetHeight-zeigerabstandY+"px"
aarg=true
}
else{
ggl.style.top=curY+zeigerabstandY+bildabstandY+"px"
zeiger.style.top=curY+zeigerabstandY+"px"
}
ggl.style.visibility="visible"
if (!aarg)
zeiger.style.visibility="visible"
else
zeiger.style.visibility="hidden"
}
}
function hideumpf(){
if (ns6||ie){
enabletip=false
ggl.style.visibility="hidden"
zeiger.style.visibility="hidden"
ggl.style.left="-1000px"
ggl.style.backgroundColor=''
ggl.style.width=''
}
}
document.onmousemove=hallo
</script>
<div><a href="http://www.homepage-baukasten.de/forum/viewtopic.php?t=83512" onMouseover="umpf('Hier kommt dann ein wenig Text rein.',180)";
onMouseout="hideumpf()" onFocus="this.blur()" target="_blank">
<img src="http://www.homepage-baukasten.de/forum/templates/subSilver/images/lang_german/icon_edit.gif" alt="" border="0">
</a>
</div> ______________
Zuletzt bearbeitet von deluxe-design am 13.04.2010, 18:46, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
blutsegelbukaniere
|
13.04.2010 um 17:52 (UTC) Titel: |
|
|
Hm? Ich versteh das Problem nicht, der Code funktioniert im Iceblue sowie
beim CSS-Design. Sobald man über das Bild fährt, erscheint eine Sprechblase.
Von daher - was geht nicht genau? ______________ Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. |
|
↑
|
|
|
-
deluxe-design
|
13.04.2010 um 17:54 (UTC) Titel: |
|
|
sobald ich das bild in Text über dem Design einfüge ist das Bild nicht posiertiert, sondern unter dem Design ______________ |
|
↑
|
|
|
-
blutsegelbukaniere
|
13.04.2010 um 18:24 (UTC) Titel: |
|
|
Ich habe mal den unteren Teil kopiert und das blaue hinzugefügt - beim Div
fehlt ja auch eine ID-Vergabe, es ist zurzeit nur ein Div ohne Anweisungen.
Zitat: <div id="name"><a href="http://www.homepage-baukasten.de/forum/viewtopic.php?t=83512" onMouseover="umpf('Hier kommt dann ein wenig Text rein.',180)";
onMouseout="hideumpf()" onFocus="this.blur()" target="_blank">
<img src="http://www.homepage-baukasten.de/forum/templates/subSilver/images/lang_german/icon_edit.gif" alt="" border="0">
</a>
</div> ______________ Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. |
|
↑
|
|
|
-
deluxe-design
|
13.04.2010 um 18:25 (UTC) Titel: |
|
|
Und was soll da rein ? ______________ |
|
↑
|
|
|
-
blutsegelbukaniere
|
13.04.2010 um 20:45 (UTC) Titel: |
|
|
Zitat: <div id="name"><a href="http://www.homepage-baukasten.de/forum/viewtopic.php?t=83512" onMouseover="umpf('Hier kommt dann ein wenig Text rein.',180)";
onMouseout="hideumpf()" onFocus="this.blur()" target="_blank">
<img src="http://www.homepage-baukasten.de/forum/templates/subSilver/images/lang_german/icon_edit.gif" alt="" border="0">
</a>
</div>
Beim grünen kommt halt die ID rein, wo du den Div positionierst. Die ID's (zb #gga)
können dann dein Div positionieren, sofern solch eine Angabe gegeben ist.
Erstell einfach dann eine ID (wie z.b content, etc) und füge dann den Namen der ID
bei name ein. ______________ Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. |
|
↑
|
|
|
-
deluxe-design
|
14.04.2010 um 05:05 (UTC) Titel: |
|
|
also einfach nur so ?
<div id="Content"><a href="http://www.homepage-baukasten.de/forum/viewtopic.php?t=83512" onMouseover="umpf('Hier kommt dann ein wenig Text rein.',180)";
onMouseout="hideumpf()" onFocus="this.blur()" target="_blank">
<img src="http://www.homepage-baukasten.de/forum/templates/subSilver/images/lang_german/icon_edit.gif" alt="" border="0">
</a>
</div> ______________ |
|
↑
|
|
|
-
blutsegelbukaniere
|
14.04.2010 um 07:01 (UTC) Titel: |
|
|
Nein, das mit Content war nur ein Beispiel
Ach, machen wir das mal ganz anders.
Zitat: <div style="position: absolute; top: 10px; left: 50%; margin-left: -100px;"><a href="http://www.homepage-baukasten.de/forum/viewtopic.php?t=83512" onMouseover="umpf('Hier kommt dann ein wenig Text rein.',180)";
onMouseout="hideumpf()" onFocus="this.blur()" target="_blank">
<img src="http://www.homepage-baukasten.de/forum/templates/subSilver/images/lang_german/icon_edit.gif" alt="" border="0">
</a>
</div>
Einfach die blauen Werte anpassen, sie lassen dann das Bild jeweils dort
positionieren (top=wie tief, margin-left=wie weit nach links/rechts) ______________ Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. |
|
↑
|
|
|
-
deluxe-design
|
14.04.2010 um 12:27 (UTC) Titel: |
|
|
posietieren kann ich sie jetzt , jedoch kann man den Text und die sprechblase nicht sehen ______________ |
|
↑
|
|
|
-
deluxe-design
|
14.04.2010 um 13:06 (UTC) Titel: |
|
|
PusH ______________ |
|
↑
|
|
|
-
blutsegelbukaniere
|
14.04.2010 um 13:14 (UTC) Titel: |
|
|
Ich hoffe aber mal stark, dass du auch den Code vom Javascript mit eingefügt
hast.. ansonsten kann es auch gar nicht funktionieren. Es müsste dann ca.
so aussehen:
Zitat:
<style type="text/css">
#gga{
position: absolute;
top: 100px;
left: 100px;
width: 150px;
border: 2px solid #c0c0c0;
padding: 2px;
color:black;
font-size:14px;
font-weight:550;
font-family:verdana, arial;
background-color: beige;
visibility: hidden;
z-index: 100;
/*******************Textfeld ohne Schatten : die folgende Zeile entfernen !!! ***********************/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#ecke{
position:absolute;
left: 100px;
z-index: 101;
visibility: hidden;
}
</style>
<script type="text/javascript">
var zeigerabstandX=20 // Abstand des Textfeldes vom Zeiger waagrecht
var zeigerabstandY=10 // Abstand des Textfeldes vom Zeiger senkrecht
var bildabstandX=19 // Abstand der Ecke auf dem Textfeld vom linken Rand
var bildabstandY=14// muss nicht geändert werden
document.write('<div id="gga"></div>')
document.write('<img id="ecke" src="http://img390.imageshack.us/img390/1952/arrow0xw.gif">')
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var ggl=document.all? document.all["gga"] : document.getElementById? document.getElementById("gga") : ""
var zeiger=document.all? document.all["ecke"] : document.getElementById? document.getElementById("ecke") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function umpf(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") ggl.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") ggl.style.backgroundColor=thecolor
ggl.innerHTML=thetext
enabletip=true
return false
}
}
function hallo(e){
if (enabletip){
var aarg=false
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-zeigerabstandX : winwidth-e.clientX-zeigerabstandX
var bottomedge=ie&&!window.opera? winheight-event.clientY-zeigerabstandY : winheight-e.clientY-zeigerabstandY
var leftedge=(zeigerabstandX<0)? zeigerabstandX*(-1) : -1000
if (rightedge<ggl.offsetWidth){
ggl.style.left=curX-ggl.offsetWidth+"px"
aarg=true
}
else if (curX<leftedge)
ggl.style.left="5px"
else{
ggl.style.left=curX+zeigerabstandX-bildabstandX+"px"
zeiger.style.left=curX+zeigerabstandX+"px"
}
if (bottomedge<ggl.offsetHeight){
ggl.style.top=curY-ggl.offsetHeight-zeigerabstandY+"px"
aarg=true
}
else{
ggl.style.top=curY+zeigerabstandY+bildabstandY+"px"
zeiger.style.top=curY+zeigerabstandY+"px"
}
ggl.style.visibility="visible"
if (!aarg)
zeiger.style.visibility="visible"
else
zeiger.style.visibility="hidden"
}
}
function hideumpf(){
if (ns6||ie){
enabletip=false
ggl.style.visibility="hidden"
zeiger.style.visibility="hidden"
ggl.style.left="-1000px"
ggl.style.backgroundColor=''
ggl.style.width=''
}
}
document.onmousemove=hallo
</script>
<div style="position: absolute; top: 10px; left: 50%; margin-left: 100px;"><a href="http://www.homepage-baukasten.de/forum/viewtopic.php?t=83512" onMouseover="umpf('Hier kommt dann ein wenig Text rein.',180)";
onMouseout="hideumpf()" onFocus="this.blur()" target="_blank">
<img src="http://www.homepage-baukasten.de/forum/templates/subSilver/images/lang_german/icon_edit.gif" alt="" border="0">
</a>
</div>
______________ Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln.
Zuletzt bearbeitet von blutsegelbukaniere am 15.04.2010, 17:44, insgesamt 2-mal bearbeitet
|
|
↑
|
|
|
-
deluxe-design
|
14.04.2010 um 14:10 (UTC) Titel: |
|
|
Der Code geht auch nicht ______________ |
|
↑
|
|
|
-
deluxe-design
|
15.04.2010 um 14:22 (UTC) Titel: |
|
|
______________ |
|
↑
|
|
|
|