Suche im Forum:
Suchen


Autor Nachricht
Beitrag12.01.2009 um 22:23 (UTC)    
Titel: Hilfebox
Antworten mit Zitat
Hallo,
wie kann man eine Hilfebox einfügen und einen Text darin schreiben, dass sie z.B. erscheint, wenn ich mit der Maus über ein Bild fahre.
Danke!!
↑
Beitrag13.01.2009 um 00:15 (UTC)    
Titel:
Antworten mit Zitat
geht das nicht automatisch?
______________
www.joh90.de
↑
Beitrag13.01.2009 um 07:03 (UTC)    
Titel:
Antworten mit Zitat
Meinst du soetwas wie hier:
http://96dreamteam.de.tl/Mannschaft.htm?PHPSESSID=c80b7db4cc851a5186961576b91edd2f

Geh mal nach unten zu den Einzelspielern
______________

Der Link führt nicht mehr zu KDL-Design sondern zu meinen neuen Projekt
↑
Beitrag13.01.2009 um 14:29 (UTC)    
Titel: Re: Hilfebox
Antworten mit Zitat
ferienhaus-pool-spanien hat Folgendes geschrieben:
Hallo,
wie kann man eine Hilfebox einfügen und einen Text darin schreiben, dass sie z.B. erscheint, wenn ich mit der Maus über ein Bild fahre.
Danke!!

Ja, ich mein so ein Infofenster wie bei den Einzelspielern.
Wie kann man einfügen und beschriften?
Danke!
↑
Beitrag13.01.2009 um 19:00 (UTC)    
Titel:
Antworten mit Zitat
Das wüsste ich auch sehr gerne:-)
↑
Beitrag13.01.2009 um 19:06 (UTC)    
Titel:
Antworten mit Zitat
Schau mal hier:

http://www.homepage-baukasten.de/forum/viewtopic.php?t=83512&start=0&postdays=0&postorder=asc&highlight=gga
↑
Beitrag13.01.2009 um 19:25 (UTC)    
Titel:
Antworten mit Zitat
Hilft mir irgendwie net weiter Sad
↑
Beitrag13.01.2009 um 19:27 (UTC)    
Titel:
Antworten mit Zitat
Das ist aber genau das, was Du suchst.
↑
Beitrag13.01.2009 um 19:34 (UTC)    
Titel:
Antworten mit Zitat
Ja aber ne also, das ist dann ja irgendwie nur für ein Bild Exclamation Question
↑
Beitrag13.01.2009 um 19:41 (UTC)    
Titel:
Antworten mit Zitat
Anstelle des Bildes kannst Du auch einen Link oder Text einbauen Wink

Zitat:
<style type="text/css">

#gga{
position: absolute;
left: -300px;
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: -300px;
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">
Ich bin Text zum hovern
</a>
</div>


Zuletzt bearbeitet von coolplace am 13.01.2009, 20:42, insgesamt einmal bearbeitet
↑
Beitrag13.01.2009 um 19:46 (UTC)    
Titel:
Antworten mit Zitat
Ja aber es ist doch dann über dem Design?!
↑
Beitrag13.01.2009 um 19:49 (UTC)    
Titel:
Antworten mit Zitat
Da hab ich ja was angezettelt. Sorry Ralph Embarassed

Ralph hat schon recht mit dem Code, wollt ihr mehr Bilder einfügen?
Den Code hab ich auch , müsste ich nur umschreiben.

Eine Alternative:
Tabelle erstellen und diesen Code mit deinem Bild und deinem Text in die entsprechende Zelle einfügen
Testbeispiel:
Zitat:

<div title="Du bist mit der Maus auf dem Bild!"><img width="214" height="330" src="http://img.webme.com/pic/k/kdl-design/foerdianim.gif" /></div>


probiert mal aus.
______________

Der Link führt nicht mehr zu KDL-Design sondern zu meinen neuen Projekt
↑
Beitrag13.01.2009 um 19:58 (UTC)    
Titel:
Antworten mit Zitat
Hab ich aber ich sehe da irgendwie keinen Text also ich habe den 1x am anfang gesehen aber nur ganz kurz! und dann wars weg! Exclamation Question



@Ralph: Wenn ich dich Nerve dann Entschuldige ich mich bei dir! Embarassed Rolling Eyes

Aber ich wüsste es einfach zu gerne und dafür ist ein Forum ja da oder? Laughing Confused


Zuletzt bearbeitet von happy-hippo-nordlicht-skinnys am 13.01.2009, 20:58, insgesamt einmal bearbeitet
↑
Beitrag13.01.2009 um 20:05 (UTC)    
Titel:
Antworten mit Zitat
ahaa...hmmmm jetzt gehts aber die schrift ist NEBEN dem Foto!
↑
Beitrag13.01.2009 um 20:29 (UTC)    
Titel:
Antworten mit Zitat
Hier der Code von Ralph erweitert auf 20 Bilder:
Zitat:

<style type="text/css">

#gga{
position: absolute;
left: -300px;
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: -300px;
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="Bild für die Ecke">')

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>
>
<table width="400" height="1249" cellspacing="1" cellpadding="1" border="0" align="center" summary="">
<tbody>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das erste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des ersten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild <br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3"><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="" /><img alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
<td>&nbsp;</td>
<td><font size="3">&nbsp;</font></td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
<tr>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
<td><span onmouseout="hideumpf()" style="" onmouseover="umpf('Hier Text für das nächste Bild einfügen)">
<img width="147" height="207" alt="ein Bild" src="hier URL des nächsten Bildes einfügen" /></span></td>
<td>
<p><font size="3">Text neben dem Bild<br />
</font></p>
</td>
</tr>
</tbody>
</table>
</font></p>


Die Werte 147px und 207 px müsst ihr anpassen,ich hab jetzt nur die letzten Punkte eingefärbt,; gilt aber für alle
______________

Der Link führt nicht mehr zu KDL-Design sondern zu meinen neuen Projekt


Zuletzt bearbeitet von kdl-design am 13.01.2009, 21:33, insgesamt einmal bearbeitet
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 2

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.