JavaScript Script für Hovereffekt

soulpride · 20. Oktober 2010

Gutem Morgen,

ich hab ein "Problem" bei meiner aktuellen Site.
Auf einer Unterseite ist ein Team abgebildet und wenn man auf die jeweiligen Personen fährt, soll sich oberhalb in einer "Sprechblase" immer das Profil (also Name, Hobbys etc) ändern. Diese Sprechblase soll eine feste Position haben, und nur der Zipfel der Sprechblase soll beim erfassen mit dem Mauszeiger einer Person auch auf diese dann zeigen. Soweit alles in Ordnung, da dies ja einfach per CSS und background-image regelbar ist.

Aber der Text soll ja auch verschwinden / angezeigt werden sobald man über eine Person fährt und das geht ja nur mit JS.

Jetzt weiß ich nicht so recht wie ich das angehen soll, bzw nach welchem Script ich da suchen soll...

Also nochmal, da es oben evtl bissl blöd erklärt ist.
Wir haben eine Person, sobald man über diese mit dem Mauszeiger fährt erscheint über ihr eine Box die aussehen soll wie eine Sprechblase. Der Zipfel soll dann auf die Person zeigen und es soll Text und ein kleines Profilbild in der Box erscheinen.
Wenn ich nicht mehr auf der Person bin, soll die Box wieder verschwinden.

Hoffe ihr könnt euch vorstellen wie ich das meine!

DonnyDepp · 20. Oktober 2010

http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseout

mit den beiden funktionen das css element shown und hiden.
viel spaß

soulpride · 20. Oktober 2010

Ich werde daraus nicht ganz schlüssig. Ist bei onmouseover nicht nötig eine Javascript-Definiton im head des dokuments zu hinterlegen?

DonnyDepp · 20. Oktober 2010

es ist egal, ob du deinen js-code-(in dem fall)einzeiler in eine funktion steckst, oder direkt ins tag.

aber wenn dir das nicht sofort klar wird, erspar dir die einarbeitung und benutz die css-möglichkeiten

http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html

für sowas wurde css :hover eingeführt.

e: achso, du willst beim hovern einen anderen text auf der seite ändern?
ja sorry, dann musste wirklich ne funktion machen, die das html-element anfässt und dem n neuen text geben bei mouseoverevents.
oder schreibstes direkt ins mouseevent.
zb.:

<div id="hallo">
<h1 id="text" >bla</h1>
</div>
<h1 id="Test"
onmouseover="document.getElementById ("text").innerHTML = 'neuer text'"
onmouseout="document.getElementById ("text").innerHTML = 'alter text'">bild</h1>

weiß nicht, ob du da die div-id angeben musst bei getelementbyid, oder obs mit jeder id geht. musste mal testen

soulpride · 20. Oktober 2010

Ich hab jetzt mal schnell was hingekrizzelt XD
Also die Sprechblase soll samt Profilbild und Text erst scheinen wenn ich über die Person fahre.

DonnyDepp · 20. Oktober 2010

jo dann gibste den elementen in der blase ne eindeutige ID und kannst dann über javascript den inhalt ändern

<tag onmouseover="document.getElementById("nameID").innerHTML = 'neuer name';
document.getElementById("hobbyID").innerHTML = 'neues hobby'; etc.... "> </tag>

so ähnlich halt

soulpride · 21. Oktober 2010

Ja, das Problem ist aber, es sind 7 Personen... das wären dann extrem viele IDs...

Mister Blue Sky · 1. November 2010

So was Ähnliches hab ich mal gemacht - allerdings mit einem Fremdscript [Quelle leider nicht gespeichert].

Deinen Angaben entsprechend [Mannschaft mit 7 Personen] hab ich das mal entsprechend aufgepeppt und abgeändert -

So siehts aus:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="scr/script.js" type="text/javascript"></script>


<style type="text/css">
/*<![CDATA[*/
div {display:inline; position:absolute; top:100px; left:20px;}
img {border:0;}

#tooltip {position:absolute; left:-300px; border:1px solid grey; 
padding:1px 5px; background-color:#fafae7; visibility:hidden; 
z-index:100; font:13.4px tahoma, sans-serif; color:#444; 
-moz-border-radius:1px; -webkit-border-radius:1px; 
border-radius:1px; box-shadow: 1px 1px 2px #999; 

-webkit-box-shadow: 1px 1px 2px #999; -moz-box-shadow: 1px 1px 2px #999;}

#pointer {position:absolute; left:-300px; z-index:101; visibility:hidden;}
li       {line-height:27px; list-style:none;}

.info    {cursor:pointer; border:1px solid grey; padding:0 2px; 
font-family:"courier new"; background:#eee; -moz-border-radius:1px; 
-webkit-border-radius:1px; border-radius:1px; background-image:-webkit-gradient
(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(255,255,255,0)),
color-stop(30%,rgba(255,255,255,0.4)),color-stop(50%,rgba(255,255,255,0.2))); 
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.8),rgba(255,255,255,0.4) 
30%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0));}

.no      {border:1px solid #adadad; padding:0 2px; font-family:"courier new"; 
color:#adadad; background:#fff; -moz-border-radius:1px; -webkit-border-radius:1px;
border-radius:1px;}
/*]]>*/
</style>

</head><body>

<div><img src="img/test.png" width="500" height="250" 
alt="" usemap="#Mannschaft" /> <map name="Mannschaft" id="Mannschaft">

<area shape="rect" href="#01" alt="" 
onmouseover="show('Hover-Info zu Person 1<br\/>123<br\/>456')" onmouseout="hide()" 
coords="63,1,185,118"/>
<area shape="rect" href="#02" alt="" 
onmouseover="show('Hover-Info zu Person 2<br\/>789<br\/>123')" onmouseout="hide()" 
coords="188,1,310,118" />
<area shape="rect" href="#03" alt="" 
onmouseover="show('Hover-Info zu Person 3<br\/>123<br\/>456')" onmouseout="hide()" 
coords="313,1,435,118"/>
<area shape="rect" href="#04" alt="" 
onmouseover="show('Hover-Info zu Person 4<br\/>789<br\/>123')" onmouseout="hide()" 
coords="2,126,124,243"/>
<area shape="rect" href="#05" alt="" 
onmouseover="show('Hover-Info zu Person 5<br\/>123<br\/>456')" onmouseout="hide()" 
coords="127,126,248,243" />
<area shape="rect" href="#06" alt="" 
onmouseover="show('Hover-Info zu Person 6<br\/>789<br\/>123')" onmouseout="hide()" 
coords="252,126,374,243" />
<area shape="rect" href="#07" alt="" 
onmouseover="show('Hover-Info zu Person 7<br\/>123<br\/>456')" onmouseout="hide()" 
coords="377,126,499,243" />

</map></div></body></html>

Code:

var offsetfromcursorX=12
var offsetfromcursorY=10

var offsetdivfrompointerX=10
var offsetdivfrompointerY=14 

document.write('<div id="tooltip"><\/div>')
document.write('<img id="pointer" src="img\/arrow01.png">')

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["tooltip"] : document.getElementById? 
document.getElementById("tooltip") : ""

var pointerobj=document.all? document.all["pointer"] : document.getElementById? 
document.getElementById("pointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? 
document.documentElement : document.body
}

function show(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+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-offsetfromcursorX : 
winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : 
winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000


if (rightedge<tipobj.offsetWidth){

tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{

tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}


if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hide(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

Erläuterung: Die Html-Datei benennst Du beispielsweise als "test.html".
Im selben Verzeichnis müsstest [du entsprechend dem Skript] noch zwei Ordner anlegen:

1. "scr" und
2. "img"

Die JS-Datei speicherst Du im Verzeichnis "scr" als "script.js" und
die 2 Grafiken speicherst Du [in Originalgröße!] als "test.png" - und den Pfeil als "arrow01.png" im Ordner "img".

BS

Suche

JavaScript Script für Hovereffekt

soulpride

Ensign

DonnyDepp

Lt. Commander

soulpride

Ensign

DonnyDepp

Lt. Commander

soulpride

Ensign

Anhänge

DonnyDepp

Lt. Commander

soulpride

Ensign

Mister Blue Sky

Gast

Ähnliche Themen