Suche im Forum:
Suchen


Autor Nachricht
Beitrag23.06.2009 um 19:05 (UTC)    
Titel: Wenn mit Maus über TExt fährt, bild anzeigen.

Wie kann man ein bild anzeigen, wenn man über einen Text fährt.
Kann man das Bild auch als Link verwenden.?
Beitrag24.06.2009 um 07:56 (UTC)    
Titel:

Hi,

Ich glaube das geht auch mit einem Mousover. Ich versuche es grade mit Javascript/DHTML als text neben der Maus. Versuchs mal hier, vieleicht hilft dir das weiter: http://www.walterzorn.de/tooltip/tooltip.htm
______________

Beitrag24.06.2009 um 07:57 (UTC)    
Titel:

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>

<!-- ########################## Baustein 1 ####################### -->


<div align="center"><a href="http://www.BILDLINK.jpg" onMouseover="umpf(' TEXT)";
onMouseout="hideumpf()" onFocus="this.blur()" target="_blank">
<img src="VERLINKUNG" width="150" alt="" border="0">
</a>
</div>

<!-- ########################## Baustein 1 Ende ####################### -->



Mußt Du nur noch anpassen.

Javascript von - http://www.gloeckner-nbg.de/tricks/quickinfo.htm
______________
Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!


No Support via PN, E-Mail or Messenger - only here : FORUM


Zuletzt bearbeitet von success4you am 24.06.2009, 08:59, insgesamt einmal bearbeitet
Beitrag24.06.2009 um 15:41 (UTC)    
Titel: Danke für die Antworten

Danke für die Antworten Very Happy
Beitrag24.06.2009 um 16:00 (UTC)    
Titel:


______________
Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!


No Support via PN, E-Mail or Messenger - only here : FORUM
Beiträge der letzten Zeit anzeigen:   


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