/ Forside/ Teknologi / Udvikling / Java Scripts / Spørgsmål
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
1  molokyle 5410
2  Klaudi 2799
3  smorch 2439
4  kim 1360
5  Harlekin 1134
6  bentjuul 984
7  gibson 800
8  severino 695
9  Random 675
10  konsulent.. 626
Image tip mouseover?
Fra : Angelica 		Vist : 534 gange
100 point
Dato : 10-10-08 02:24
søger en nem måde at fixe noget der ligner dette - http://www.tagyourartout.com/ altså når man så går under tutorials og sætter musen over dem så kommer der et image så man ikk skal tryk ind for at se dem..

Så skal denne image gerne blive inde i denne iframe og ikk evt. lave scroller på iframe når museover er for tæt på rammen.. håber man kunne forstå hva jeg mente..

Har prøvet at lege med det men som sagt driller det..

 
 
Kommentar
Fra : klamigen

Dato : 10-10-08 12:15
Mener du noget i denne stil.
Klik på html filen
Tager 2 minutter at lave.
Smid lige en PM_??
http://www.sendspace.com/file/5syg61

Kommentar
Fra : Angelica

Dato : 10-10-08 15:16
tager ikk imod filer jeg ikk kender vedkommen af.. sorry.. men jeg har linket til det jeg mener..

Kommentar
Fra : klamigen

Dato : 10-10-08 16:45
Kan ikke hjælpe når du ikke vil se resultatet.
-----------
Men koden kan du selv lege lidt med-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>index</title>
<meta name="GENERATOR" content="Virtual Mechanics SiteSpinner V2 270c ">
<meta http-equiv="imagetoolbar" content="false">

<style type="text/css">
<!--
.fsx01 {font-size: 11px;}
.fsx02 {font-size: 12px;}
.fsx03 {font-size: 13px;}
.fsx04 {font-size: 15px;}
.fsx05 {font-size: 16px;}
.fsx06 {font-size: 19px;}
.fsx07 {font-size: 21px;}
.fsx08 {font-size: 24px;}
.fsx09 {font-size: 27px;}
.fsx10 {font-size: 29px;}
.fsx11 {font-size: 32px;}
.fsx12 {font-size: 35px;}
.fsx13 {font-size: 37px;}
.fsx14 {font-size: 48px;}
.fsx15 {font-size: 64px;}
.fsx16 {font-size: 96px;}
.txdec {text-decoration: none;}

input,textarea,select {color:#000000;font-family:'Times New Roman';font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;}
.dfltt {font-family:'Times New Roman';font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;color:#000000;}
.dfltc {font-family:'Times New Roman';font-size:12px;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;color:#000000;}
body {margin:0;height:100%;width:100%;}
-->
</style>
</head>

<body bgcolor="#ffffff" alink="#ff0000" link="#0000ff" vlink="#800080" >

<div id="Oobj2" style="position:absolute;z-index:1;visibility:visible; left:156px;top:63px;width:400px;height:24px;">
<div id="Grtf2" class="dfltt">
<font face="Arial" class="fsx05">ggggggggggggggggggg<br></font></div>
</div>

<div id="Oobj3" style="position:absolute;z-index:2;visibility:visible; left:157px;top:97px;width:400px;height:43px;">
<div id="Grtf3" class="dfltt">
<font face="Arial" class="fsx05">Pr&#0248;ve---------------------------------------------------<br>
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj<br></font></div>
</div>

<div id="Oobj4" style="position:absolute;z-index:3;visibility:visible; left:157px;top:152px;width:400px;height:24px;">
<div id="Grtf4" class="dfltt">
<font face="Arial" class="fsx05">123<br></font></div>
</div>

<div id="Oobj6" style="position:absolute;z-index:4;visibility:visible; left:536px;top:6px;width:263px;height:235px;">
<img name="Ggeo6" src="./image/obj6geo6pg1p8.png" alt="" border = "0" width="263" height="235"></div>


<script language="JavaScript" type="text/javascript" for="window">
<!--
var isNav4 = false, isIE4 = false, isIE4 = false, isNC6 = false;
var cmx = 0, cmy = 0;

if (document.all) isIE4 = true;
else if (document.getElementById) isNC6 = true;
else if (document.layers) isNav4 = true;

if (isNav4) {
   window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEMOVE);
   window.onmousedown=NNmouseDown;
   window.onmouseup=NNmouseUp;
   window.onmousemove=NNmouseMove;
   window.onresize=ReloadPage;
}
else if (isIE4){
   window.document.onmousedown=IEmouseDown;
   window.document.onmouseup=IEmouseUp;
   window.document.onmousemove=IEmouseMove;
   window.onresize=ReloadPage;
}
else if (isNC6){
   window.document.onmousedown=NNmouseDown;
   window.document.onmouseup=NNmouseUp;
   window.document.onmousemove=NNmouseMove;
   window.onresize=ReloadPage;
}
Version = 221;
ob = new Array();
pObjLst= new Array;
Molst = new Array();

initOb(0,1,2,33536,0,0,'Oobj2','');
initOb(1,2,null,2048,0,0,'Oobj3','');
initOb(2,3,4,33536,0,0,'Oobj4','');
initOb(3,4,null,2048,0,0,'Oobj6','');

SetDimensions();

MoLNo = 4;
pageObj = 0;
function SetDimensions()
{
   var scrW;
   var srcH;

   if(isNav4) {
      scrW      = window.innerWidth;
      scrH      = window.innerHeight;
   }
   else if(isIE4) {
      scrW      = document.body.offsetWidth-20;
      scrH      = document.body.offsetHeight;
   }
   else if(isNC6) {
      scrW      = document.body.offsetWidth;
      scrH      = document.body.offsetHeight;
   }

   currrects = new Array(1,2,3,4,0);
   setCurrectRects(currrects)
   delete currrects;
}


function initOb (ncount, nref,ntrg, nflg,nl,nr,szidname, sznn4name)
{
pObjLst[ncount] = nref;
ob[nref] = new Array();

if(document.getElementById) {
ob[nref].obj = document.getElementById(szidname);
ob[nref].style = ob[nref].obj.style;
}
else if(isNav4) {
var objstr;
if(sznn4name.length>0) {
objstr= sznn4name +'document.'+ szidname;
}
else {
objstr='document.' + szidname;
}
ob[nref].obj = eval(objstr);
ob[nref].style = ob[nref].obj;
}
else if(isIE4) {
ob[nref].obj = document.all[szidname];
ob[nref].style = ob[nref].obj.style;
}

if(ntrg!=null) {
ob[nref].trg =ntrg;
}
ob[nref].flg =nflg;
ob[nref].bdl = nl;
ob[nref].bdr = nr;
Molst[ncount] = nref;
}

function setCurrectRects(currrects) {
for (i=0;i< currrects.length-1;i++) {
getCurrentRect(ob[currrects[i]]);
}
}

function getCurrentRect(ob){
el = ob.obj;
if(isNav4){
ob.left    = el.pageX + ob.bdl;
ob.top = el.pageY + ob.bdl;
ob.right = el.pageX + el.clip.width-ob.bdr;
ob.bottom = el.pageY + el.clip.height-ob.bdr;
   }
else{
ob.left = el.offsetLeft+1;
ob.top = el.offsetTop +1;
tempEl = el.offsetParent;
while (tempEl != null) {
ob.left += tempEl.offsetLeft;
ob.top += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
ob.right = ob.left+ el.offsetWidth-ob.bdr;
ob.bottom = ob.top+ el.offsetHeight-ob.bdr;
ob.left += ob.bdl;
ob.top += ob.bdl;
}
}

function ReloadPage() {
   SetDimensions();
}

function NNmouseMove(e) {
   cmx = e.pageX;
   cmy = e.pageY;
   if(MoLNo > 0) MoOvrTst();
}
function NNmouseDown(e) {
   cmx = e.pageX;
   cmy = e.pageY;
   if(MoLNo > 0) MouseDown();
}
function NNmouseUp(e) {
cmx = e.pageX;
cmy = e.pageY;
   if(MoLNo > 0) MouseUp();
}
function IEmouseMove() {
cmx = window.event.clientX + document.body.scrollLeft;
cmy = window.event.clientY + document.body.scrollTop;
if(MoLNo > 0) MoOvrTst();
}
function IEmouseDown() {
   cmx = window.event.clientX + document.body.scrollLeft;
   cmy = window.event.clientY + document.body.scrollTop;
if(MoLNo > 0) MouseDown();
}
function IEmouseUp() {
   cmx = window.event.clientX + document.body.scrollLeft;
   cmy = window.event.clientY + document.body.scrollTop;
if(MoLNo > 0) MouseUp();
}
function MoOvrTst()
{
   var i;
   for(i=0; i < MoLNo; i++) {
      Cobj = Molst[i];
      if(ob[Cobj].flg) {
         if(ob[Cobj].flg & (1<<5)) {
            if(MouseOver() == 1) {
               if(ob[Cobj].flg & (1<<6)) {
                  setVisibility("hidden");
               }
               else {
                  setVisibility("visible");
               }
            }
            else {
               if(ob[Cobj].flg & (1<<7)) {
                  setVisibility("hidden");
               }
               else {
                  setVisibility("visible");
               }
            }
         }
         if(ob[Cobj].flg & (1<<8)) {
            if(!(ob[Cobj].flg & (1<<12)) && MouseOver() == 1) {
               if(ob[Cobj].flg & (1<<9) && isActive() ) {
               ob[Cobj].flg = ob[Cobj].flg | (1<<12);
                   if( (ob[Cobj].flg & (1<<15)) ) {
                     setVisibility("hidden");
                  }

                  Cobj = ob[Cobj].trg;
                  setVisibility("visible");
               }
               else if(ob[Cobj].flg & (1<<10)) {
               ob[Cobj].flg = ob[Cobj].flg | (1<<12);
                  if( (ob[Cobj].flg & (1<<15)) ) {
                     setVisibility("visible");
                  }

                  Cobj = ob[Cobj].trg;
                  setVisibility("hidden");}
               }
               else if((ob[Cobj].flg & (1<<12)) && MouseOver() == 0) {
                  if(!(ob[Cobj].flg & (1<<16))){
                     if(ob[Cobj].flg & (1<<9)) {
                        if( (ob[Cobj].flg & (1<<15)) ) {
                           setVisibility("visible");
                        }
                        Cobj = ob[Cobj].trg;
                        setVisibility("hidden");
                        ob[Molst[i]].flg = ob[Molst[i]].flg & ~(1<<12);
                     }
                     else if(ob[Cobj].flg & (1<<10) && isActive()) {
                        if( (ob[Cobj].flg & (1<<15)) ) {
                           setVisibility("hidden");
                        }
                        Cobj = ob[Cobj].trg;
                        setVisibility("visible");
                        ob[Molst[i]].flg = ob[Molst[i]].flg & ~(1<<12);
                     }
                  }
                  else {
                     ob[Molst[i]].flg = ob[Molst[i]].flg & ~(1<<12);
                  }
               }
            }
         }
      }
}

function MouseOver()
{
   if( cmx >= ob[Cobj].left && cmx <= ob[Cobj].right && cmy >= ob[Cobj].top && cmy <= ob[Cobj].bottom) {
       return 1;
   }
   else {
      return 0;
   }
}

function setVisibility(code)
{
   var i;
   if((ob[Cobj].flg & (1<<24))&& (ob[Cobj].flg &(~(1<<24)))) {
      ob[Cobj].style.visibility = code;
      for(i = 0; i < ob[Cobj].gsz; i++) {
ob[ob[Cobj].grp[i]].style.visibility = code;
      }
   }
   else {
      ob[Cobj].style.visibility = code;
   }
}

InitVisibility();

function InitVisibility()
{
var i;
   obTriggered = new Array();
   nCount=0;

   obGroup = new Array();
   for(i=0; i < MoLNo; i++) {
      obGroup[i]=0;
   }

   for(i=0; i < MoLNo; i++) {
      bHidden=0;
      if(ob[Molst[i]].flg & (1<<4)) {
         bHidden=1;
      }
      else if(ob[Molst[i]].flg & (1<<8)) {
         if( (ob[Molst[i]].flg & (1<<9)) ||(ob[Molst[i]].flg & (1<<13)) ) {
            obTriggered[nCount]= ob[Molst[i]].trg;
            nCount+=1;
         }
         else if( (ob[Molst[i]].flg & (1<<15)) ) {
            if( (ob[Molst[i]].flg & (1<<10)) ||(ob[Molst[i]].flg & (1<<14)) ) {
               bHidden=1;
            }
         }
      }
      else {
         bHidden=0;
      }

      if(bHidden==1) {
         code = "hidden";
      }
      else {
         code = "visible";
      }

      Cobj=Molst[i];
      if(obGroup[Cobj]!=1){
         setVisibility(code);
      }

      var j;
      if((ob[Molst[i]].flg & (1<<24)) && (ob[Molst[i]].flg & (~(1<<24)))) {
         for(j = 0; j < ob[Molst[i]].gsz; j++) {
            obGroup[ob[Molst[i]].grp[j]] =1;
         }
      }
   }

   for(i=0; i < nCount; i++) {
      Cobj =obTriggered[i];
      code = "hidden";
      setVisibility(code);
   }
}

function isActive()
{
   var bVisible = 1;
   if(ob[Cobj].flg & (1<<17)){
      if(isNav4){
         bVisible = ob[Cobj].style.visibility=="show";
      }
      else{
         bVisible = ob[Cobj].style.visibility=="visible";
      }
   }
   return bVisible;
}

function MouseUp()
{
   var i;
   for(i=0; i < MoLNo; i++) {
      Cobj = Molst[i];
      if(MouseOver() == 1) {
         if( (ob[Cobj].flg & (1<<14)) && isActive()) {
            if(!(ob[Cobj].flg & (1<<16))) {
               if( (ob[Cobj].flg & (1<<15))) {
                  setVisibility("hidden");
               }
               Cobj = ob[Cobj].trg;
               setVisibility("visible");
            }
         }
         else if( (ob[Cobj].flg & (1<<13))) {
            if(!(ob[Cobj].flg & (1<<16))) {
                if( (ob[Cobj].flg & (1<<15)) ) {
                  setVisibility("visible");
               }
                  Cobj = ob[Cobj].trg;
                  setVisibility("hidden");
            }
         }
      }
   }
}

function MouseDown()
{
   var i;
   for(i=0; i < MoLNo; i++) {
      Cobj = Molst[i];
      if(MouseOver() == 1) {
          if( (ob[Cobj].flg & (1<<13)) && isActive()) {
             if( (ob[Cobj].flg & (1<<15)) ) {
            setVisibility("hidden");
            }
            Cobj = ob[Cobj].trg;
            setVisibility("visible");
         }
         else if( (ob[Cobj].flg & (1<<14))) {
            if( (ob[Cobj].flg & (1<<15)) ) {
            setVisibility("visible");
            }
            Cobj = ob[Cobj].trg;
            setVisibility("hidden");
         }
      }
   }
}

//-->
</script>
</body>
</html>


Kommentar
Fra : klamigen

Dato : 10-10-08 16:48
Kommentar
Fra : klamigen

Dato : 10-10-08 17:05
Ellers skriv hvilket program du bruger til at
lave din side med, de fleste progammer har funktionen, indbygget.


Kommentar
Fra : severino

Dato : 10-10-08 17:11
Jeg kunne såmen godt give dig en del sjove eksempler på det, men da du er af den mistænkelige type, og ikke vil modtage sådanne filer, såååeeeeeeeeeeeeeeeeeeeee ?????

Kommentar
Fra : klamigen

Dato : 10-10-08 17:45
Citat
såååeeeeeeeeeeeeeeeeeeeee ?????


Smutter igen, mens jeg er i live...


Kommentar
Fra : klamigen

Dato : 10-10-08 18:44
Ellers brug GRATIS programmer til at beskytte dig
mod alt andet, end en stakkels HTML fil........
Fatter SGU ikke mennesker mere.
NÅ__men HVAD, man lærer af erfaring/ + 1 godt råd
http://www.returnilvirtualsystem.com/index_files/rvspersonal.htm

Kommentar
Fra : molokyle

Dato : 11-10-08 17:04
Hør nu..

Den 'simpleste' måde at lave en mouseover på et (X-)HTML element er ved brug af EVENT modellen og Javascript mannipulation af DOM:

Kode
<html>
<head>
<script language="javascript">
var imageName = "swapImage";
var oldSrc = null;
function imgOver(newSrc) {
oldSrc = document.images[imageName].src;
document.images[imageName].src = newSrc;
}
function imgOut() {
document.images[imageName].src = oldSrc;
oldSrc = null;
}
</script>
</head>
<body>
<div style="position:absolute;top=100;left=100;">
<p>
Kør musen over <span onmouseover="imgOver('bulbon.gif');this.style.cursor='crosshair';" onmouseout="imgOut()">DENNE</span>
eller <span onmouseover="imgOver('bulboff.gif');this.style.cursor='crosshair';" onmouseout="imgOut()">DENNE</span> tekst.
</p>
<div style="position:absolute;left=50%">
<img name="swapImage" src="pixel.gif">
</div>
</div>
</body>
</html>


http://www.cssboxing.com/temp/mouseover_tekst.html

Dette kræver dog at 'indsætningspunktet' befinder sig i aktuelle frame.

Samme 'effekt' kan selvfølgelig laves helt uden brug af javascript

Kast et blik på f.eks. CSS løsningerne:

1.) http://www.cssplay.co.uk/menu/alert
2.) http://www.cssplay.co.uk/menu/balloons
3.) http://www.cssplay.co.uk/menu/pop_ups ( Ps. Kun linket 'Sparrow' du'er )
4.) http://www.cssplay.co.uk/menu/tooltips
5.) http://www.cssplay.co.uk/menu/tool_links

</MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 11-10-08 17:13
Hér et eksempel jeg lavede for nogen tid siden i modulær XHTML 1.1 (strict DTD):

http://www.cssboxing.com/temp/span_popup_tekst_og_billede.html

..UDEN brug af Javascript

Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Span tekst + billede popup på links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
[CDATA[
.pop a {position:relative;}
.pop a span {display:none;}
.pop a:hover span {
position:absolute;
display:block;
border:1px solid black;
padding:8px;
color:#000;
background:#ffff66;
text-decoration:none;
}
]]
//-->
</style>
</head>
<body>
<div>
Dette er en
<span class="pop"><a href="#" title="">tekst<span>Dette er pop-up teksten ved mouseover.<br /><br />..og et billede:<br /><br /><img src="billede1.jpg" alt=""></span></a></span>
som giver en pop-up tekst og billeder ved mouseover.
</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 11-10-08 17:32
Øeh.. bøeh... Det sku' 'måske' liiiiige nævnes; at mit CSS script KUN virker efter hensigten i IE ..og 'nogenlunde' i Safari (..for Windows) og i Opera.

I Firefox, Flock og Google Chrome ..er der ..hmmm ..stadig rum for forbedringer

</MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 11-10-08 21:19
Det går dog en smule bedre i XHTML 1.0 strict DTD:

http://www.cssboxing.com/temp/span_popup_tekst_og_billede_10.html

..og et par 'smårettelser'

Kode
<!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" lang="da" xml:lang="da">
<head>
<title>Span tekst + billede popup på links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.pop a {position:relative;}
.pop a span {display:none;}
.pop a:hover span {
position:absolute;
display:block;
border:1px solid black;
padding:8px;
color:#000;
background:#ffff66;
text-decoration:none;
white-space: nowrap;
}
//-->
</style>
</head>
<body>
<div>
Dette er en
<span class="pop"><a href="#" title="">tekst<span>Dette er pop-up teksten ved mouseover.<br /><br />..og et billede:<br /><br /><img src="billede1.jpg" alt="" /></span></a></span>
som giver en pop-up tekst og billeder ved mouseover.
</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : Angelica

Dato : 12-10-08 02:48
har leget med dette script men den driller ved at vise sig underligt i iframe med at lave scroll bare osv istedet for at lige som at pop foran ..

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Kommentar
Fra : molokyle

Dato : 12-10-08 17:45
Jamen, dette forhold gør man jo netop opmærksom på i script beskrivelsen:
Citat
The code detects for window edges and keeps the tooltip inside.


..inside: THE WINDOW ..underforstået og dermed også; ..inside: AN IFRAME ...som er, at betragte som et lukket client-area (klientområde). Hvis du tester sciptet i et alm. browservindue vil du bemærke , at selvsamme SCROLL-BORDERS vil optræde, når 'indholdet' ( = selve tool-tip'et ) ikke kan 'være der'.

Jeg kender nu heller intet script som kan række 'ud over' klientområdet. End ikke ved cross window scripting som f.eks.:

http://www.quirksmode.org/js/croswin.html (..= manipulation af indhold på 'tværs' af vinduer.)

Så jeg må melde 'Hus forbi' ...så langt mine evner rækker

Jeg filosoferer:

Du skal nok tænke uden om iframes og kaste et blik på AJAX dynamik istedet. Da kan du dynamisk skifte indhold på SAMME side ...UDEN at skulle indlejre remote indhold i en separat (i-)frame. Du vil så altid have adgang til hele det klientområde du sér i browservinduet, da ALT forgår på SAMME side.

</MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 12-10-08 17:53
Ps, Hvis det 'bare' er scroll-bar'en du vil undgå i iframe'en?

Citat
scrolling:
"auto" scrollbars appear if and only if they are needed to see all the content; this is the default

"yes" scrollbars appear in any case

"no" scrollbars do not appear, which may cause part of the content to be inaccessible; see example on simulating scrollable tables


..fra: http://www.cs.tut.fi/~jkorpela/html/iframe.html

</MOLOKYLE>

Kommentar
Fra : Angelica

Dato : 12-10-08 18:05
Ved godt det med auto og no og det.. Men da mine sider jo indimellem skal rolles ned af så kan jeg jo ikk sætte den på no.. Men er der ikk plads til image så prøver min iframe at udvide med en dum bund srcoll og den vil jeg jo ikk have.. Men tak for svarene..

Kommentar
Fra : molokyle

Dato : 13-10-08 18:22
Tilpas i stedet dine billeder til iframen med en % angivelse:

http://www.cssboxing.com/eksempler/eks001.php

Så undgår du overflow pga. dine billeders størrelse.

</MOLOKYLE>

Du har følgende muligheder
Dette spørgsmål er blevet annulleret, det er derfor ikke muligt for at tilføje flere kommentarer.
Søg
Reklame
Statistik
Spørgsmål : 177425
Tips : 31962
Nyheder : 719565
Indlæg : 6407918
Brugere : 218877
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.