---
title: "mouseover popup"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/121853-mouseover-popup"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "lillan"
published: "2005-02-06T18:50:54.000Z"
updated: "2005-02-07T09:39:53.000Z"
replies: 10
views: 415
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/121853-mouseover-popup"
---
# mouseover popup
## #1 — lillan, 2005-02-06T18:50Z
Jag vill att när jag för musen över ett visst ord eller länk så ska det komma fram ett litet popupfönster med ett foto.
Någon som kan hjälpa? :r
Permalänk: https://www.webforum.nu/p/121853
## #2 — donkey, 2005-02-06T19:23Z
är ingen höjdare på javascript, men det här borde funka
kod mellan \ och \
```
```
kod mellan \ och \
```
onmouseover
```
finns säkert bättre sätt...
Permalänk: https://www.webforum.nu/p/1548153
## #3 — zcorpan, 2005-02-06T19:52Z
```
Test
Test
```
Popupen blockeras av Firefox, och jag skulle tro att du överraskar användaren när du använder onmouseover.
Jag skulle snarare använda onclick, eller: :)
Permalänk: https://www.webforum.nu/p/1548166
## #4 — lillan, 2005-02-06T20:18Z
Hmm, jag var lite otydlig...
jag menar denna effekten..
Klicka på ME och sedan på "basic info"
För musen över de understukna orden -så vill jag göra :r
Permalänk: https://www.webforum.nu/p/1548180
## #5 — donkey, 2005-02-06T20:36Z
jaha.. här kanske det finns nåt du kan använda...
ex. den för valfri html-kod, kanske
Permalänk: https://www.webforum.nu/p/1548191
## #6 — lillan, 2005-02-06T20:47Z
Näe grrr...
funkar inte!
Det är bara bildens url som syns i fönstret :( :r
Permalänk: https://www.webforum.nu/p/1548201
## #7 — donkey, 2005-02-06T21:24Z
ok... har tyvärr inga andra förslag :( du får vänta på nån mer kunnig... eller kan du ju maila och fråga
Permalänk: https://www.webforum.nu/p/1548218
## #8 — zcorpan, 2005-02-07T06:32Z
Det här hittade jag i källkoden på sidan du länkade till.
> ```
>
> Leon
> ```
>
>
>
> ```
> var dom = (document.getElementById) ? true : false;
> var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
> var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
> var ns4 = (document.layers && !dom) ? true : false;
> var ie4 = (document.all && !dom) ? true : false;
> var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
> var origWidth, origHeight;
> if (ns4) {
> origWidth = window.innerWidth; origHeight = window.innerHeight;
> window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
> }
> if (nodyn) { event = "nope" }
> var tipFollowMouse= true;
> var tipWidth= 210;
> var offX= 20; // how far from mouse to show tip
> var offY= 5;
> var tipFontFamily= "tahoma, arial, helvetica, sans-serif";
> var tipFontSize= "7pt";
> var tipFontColor= "#596970";
> var tipBgColor= "#ffffff";
> var tipBorderColor= "#C9CDCF";
> var tipBorderWidth= 1;
> var tipBorderStyle= "ridge";
> var tipPadding= 4;
> var messages = new Array();
> messages[0] = new Array('blinkie.gif','The influence of Angelique [...] occur.
Taken from:[url]www.kabalarians.com[/url]',"#ffffff");
> messages[1] = new Array('kevin.jpg','
Kevin
My everything:)',"#000000");
> messages[2] = new Array('leon.jpg','Leon',"#000000");
> // preload images that are to appear in tooltip
> // from arrays above
> if (document.images) {
> var theImgs = new Array();
> for (var i=0; i theImgs[i] = new Image();
> theImgs[i].src = messages[i][0];
> }
> }
> var startStr = ' |
| ';
> var endStr = ' |
';
> var tooltip, tipcss;
> function initTip() {
> if (nodyn) return;
> tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
> tipcss = (ns4)? document.tipDiv: tooltip.style;
> if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
> tipcss.width = tipWidth+"px";
> tipcss.fontFamily = tipFontFamily;
> tipcss.fontSize = tipFontSize;
> tipcss.color = tipFontColor;
> tipcss.backgroundColor = tipBgColor;
> tipcss.borderColor = tipBorderColor;
> tipcss.borderWidth = tipBorderWidth+"px";
> tipcss.padding = tipPadding+"px";
> tipcss.borderStyle = tipBorderStyle;
> }
> if (tooltip&&tipFollowMouse) {
> if (ns4) document.captureEvents(Event.MOUSEMOVE);
> document.onmousemove = trackMouse;
> }
> }
>
> window.onload = initTip;
> var t1,t2; // for setTimeouts
> var tipOn = false; // check if over tooltip link
> function doTooltip(evt,num) {
> if (!tooltip) return;
> if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
> tipOn = true;
> // set colors if included in messages array
> if (messages[num][2]) var curBgColor = messages[num][2];
> else curBgColor = tipBgColor;
> if (messages[num][3]) var curFontColor = messages[num][3];
> else curFontColor = tipFontColor;
> if (ns4) {
> var tip = '| '+ startStr + messages[num][0] + midStr + '' + messages[num][1] + '' + endStr + ' |
|
';
> tooltip.write(tip);
> tooltip.close();
> } else if (ie4||ie5||ns5) {
> var tip = startStr + messages[num][0] + midStr + '' + messages[num][1] + '' + endStr;
> tipcss.backgroundColor = curBgColor;
> tooltip.innerHTML = tip;
> }
> if (!tipFollowMouse) positionTip(evt);
> else t1=setTimeout("tipcss.visibility='visible'",100);
> }
>
> var mouseX, mouseY;
> function trackMouse(evt) {
> mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
> mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
> if (tipOn) positionTip(evt);
> }
> function positionTip(evt) {
> if (!tipFollowMouse) {
> mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft;
> mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop;
> }
> var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
> var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
> var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft;
> var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop;
> if ((mouseX+offX+tpWd)>winWd)
> tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
> else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
> if ((mouseY+offY+tpHt)>winHt)
> tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
> else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
> if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
> }
>
> function hideTip() {
> if (!tooltip) return;
> t2=setTimeout("tipcss.visibility='hidden'",100);
> tipOn = false;
> }
> ```
Permalänk: https://www.webforum.nu/p/1548332
## #9 — lillan, 2005-02-07T08:09Z
Åhhh!
Jag försökte själv hitta källan för att se vart hon hittat sitt script men lyckades inte.
HUR ska jag sätta in detta i ett htm.dokument?
För att skriva så där rakt upp och ner blir ju inte så bra :r
Permalänk: https://www.webforum.nu/p/1548353
## #10 — TomasTvivlaren, 2005-02-07T09:33Z
Kolla på Sedan håller du muspilen över "HTML"
Permalänk: https://www.webforum.nu/p/1548367
## #11 — TomasTvivlaren, 2005-02-07T09:39Z
Sedan har vi sidan
Permalänk: https://www.webforum.nu/p/1548371
---
Tråden på webben: https://www.webforum.nu/amne/html-css/121853-mouseover-popup