Søg
Avatar billede Chewie Novice
11. april 2005 - 11:35 Der er 11 kommentarer og
1 løsning

shotbox funktion

Hej exp´er

Jeg har fået hjælp af roenving her på E! til denne funktion og kunne godt tænke mig at tilføje en lille feature.

Som det er nu bliver shotboxen vist i forhold til cursoren(musen), kan man lave det om så den bliver vist et bestemt sted på skærmen eller inden for browseren eks. 100px for topppen og 100px fra venstre ?

------------------------------------------------------

<br>6. <a href="http://www.newfashionstyle.com/images/justerer_tekst.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="hideBox()" onclick="return false;">Justerer tekst</a>
<br>7. <a href="http://www.newfashionstyle.com/images/Din_Egen_Tekst_v2.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="hideBox()" onclick="return false;">Din egen tekst</a> (max. 6 linier)
<br><br>Hvis du ikke kan se ovenstående guide klik her <a target="_blank" href="http://www.newfashionstyle.com/options_guides/">[link]</a>
<br><hr>
<span style="font-size:x-small;font-weight:bold;">Her kan du foretage dine valg</span> (se guiden hvis du er i tvivl)</span>

<div id="minDiv" style="position:absolute;border:2px ridge #222;display:none;overflow:hidden;"><iframe id="minIframe" name="minIframe" src="about:blank" style="width:100%;height:100%;overflow:hidden;"></iframe></div>
<script language="javascript" type="text/javascript">
function showBox(w,h,e) {
  box = document.getElementById("minDiv").style;
  box.left = ((e.clientX) ? e.clientX:e.pageX)+15+"px";
  box.top = ((e.clientY) ? e.clientY:e.pageY)-15+"px";
  box.width = w + 'px';
  box.height = h + 'px';
  box.display = "block";
}
function hideBox(){
  document.getElementById("minDiv").style.display = 'none';
}
function showURL(link){
  window.minIframe.location.href = link.href;
}
</script>

------------------------------------------------------

mvh.
Søren
Avatar billede skyggen2000 Nybegynder
11. april 2005 - 11:58 #1
prøv at ændre disse to linier til:
  box.left = ((e.clientX) ? e.clientX:e.pageX)+15+"px";
  box.top = ((e.clientY) ? e.clientY:e.pageY)-15+"px";

  box.left = "100px";
  box.top = "100px";
Avatar billede skyggen2000 Nybegynder
11. april 2005 - 11:59 #2
jeg kørte dette eksempel, og det funkede:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">

function showBox(w,h,e) {
  box = document.getElementById("minDiv").style;
  //box.left = ((e.clientX) ? e.clientX:e.pageX)+15+"px";
  //box.top = ((e.clientY) ? e.clientY:e.pageY)-15+"px";
  box.left = "100px";
  box.top = "100px";
  box.width = w + 'px';
  box.height = h + 'px';
  box.display = "block";
}
function hideBox(){
  document.getElementById("minDiv").style.display = 'none';
}
function showURL(link){
  window.minIframe.location.href = link.href;
}
</script>

<body>   
<br>6. <a href="http://www.newfashionstyle.com/images/justerer_tekst.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="hideBox()" onclick="return false;">Justerer tekst</a>
<br>7. <a href="http://www.newfashionstyle.com/images/Din_Egen_Tekst_v2.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="hideBox()" onclick="return false;">Din egen tekst</a> (max. 6 linier)
<br><br>Hvis du ikke kan se ovenstående guide klik her <a target="_blank" href="http://www.newfashionstyle.com/options_guides/">[link]</a>
<br><hr>
<span style="font-size:x-small;font-weight:bold;">Her kan du foretage dine valg</span> (se guiden hvis du er i tvivl)</span>

<div id="minDiv" style="position:absolute;border:2px ridge #222;display:none;overflow:hidden;"><iframe id="minIframe" name="minIframe" src="about:blank" style="width:100%;height:100%;overflow:hidden;"></iframe></div>
   
</body>

</html>
Avatar billede skyggen2000 Nybegynder
11. april 2005 - 12:03 #3
Du kan også gøre funktionen lidt mere dynamisk, så du i funktionskaldet kan definere positionen. Hvis ikke du går det, tager den 100,100 som default.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">

function showBox(w,h,e,leftPos,topPos) {
 
  if(!topPos)
      topPos = 100;
     
  if(!leftPos)
      LeftPos = 100;
 
  box = document.getElementById("minDiv").style;
  //box.left = ((e.clientX) ? e.clientX:e.pageX)+15+"px";
  //box.top = ((e.clientY) ? e.clientY:e.pageY)-15+"px";
  box.left = topPos + "px";
  box.top = topPos +"px";
  box.width = w + 'px';
  box.height = h + 'px';
  box.display = "block";
}
function hideBox(){
  document.getElementById("minDiv").style.display = 'none';
}
function showURL(link){
  window.minIframe.location.href = link.href;
}
</script>

<body>   
<br>6. <a href="http://www.newfashionstyle.com/images/justerer_tekst.gif" onmouseover="showURL(this);showBox(411,420,event,200,200);" onmouseout="hideBox()" onclick="return false;">Justerer tekst</a>
<br>7. <a href="http://www.newfashionstyle.com/images/Din_Egen_Tekst_v2.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="hideBox()" onclick="return false;">Din egen tekst</a> (max. 6 linier)
<br><br>Hvis du ikke kan se ovenstående guide klik her <a target="_blank" href="http://www.newfashionstyle.com/options_guides/">[link]</a>
<br><hr>
<span style="font-size:x-small;font-weight:bold;">Her kan du foretage dine valg</span> (se guiden hvis du er i tvivl)</span>

<div id="minDiv" style="position:absolute;border:2px ridge #222;display:none;overflow:hidden;"><iframe id="minIframe" name="minIframe" src="about:blank" style="width:100%;height:100%;overflow:hidden;"></iframe></div>
   
</body>

</html>
Avatar billede Chewie Novice
11. april 2005 - 12:06 #4
Super ... det virker perfekt

mange tak for hjælpen
Avatar billede Chewie Novice
11. april 2005 - 12:07 #5
du er da et geni :)
Avatar billede skyggen2000 Nybegynder
11. april 2005 - 12:28 #6
hehe, så tillader jeg mig at smide et svar så:)
Avatar billede Chewie Novice
11. april 2005 - 12:30 #7
:) god dag
Avatar billede Chewie Novice
06. juli 2005 - 09:30 #8
Jeg har lige en enkelt spg. til denne funktion :)

kan man lave baggrunden hvid i den boks det popper op ? - som den er nu er den gennemsigtig og det kan se lidt forvirrende ud når der er ramme på.

/Søren
Avatar billede skyggen2000 Nybegynder
14. juli 2005 - 15:56 #9
i det eksempel ovenover er det et billede der bliver vist, og er tilsyneladende ikke gennemsigtig. har lige prøvet at køre det igen.

Måske kan du paste den kode du har ind i spg'et, så er det nemmere at forholde sig til.
Avatar billede Chewie Novice
14. juli 2005 - 18:14 #10
Jeg har fundet frem til at det kun er i Mozilla firefox problemmet er og det er der vel ikke meget at gøre ved ?
Avatar billede skyggen2000 Nybegynder
14. juli 2005 - 23:10 #11
det kommer jo an på hvad problemet er. Det er ikke sikkert koden er kompatibel med alle browsere.

Prøv at lir noget kode af, så er det nemmere at bedømme.
Avatar billede Chewie Novice
15. juli 2005 - 08:05 #12
<br><br>
<span style="font-size: x-small;font-weight:bold;">T-shirt guide</span> (Hold musen over guiderne)
<br>1. <a href="http://www.newfashionstyle.com/images/size_guide.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="return false;" onclick="return false;">Størrelse</a>
<br>2. <a href="http://www.newfashionstyle.com/images/colorcard.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="return false;" onclick="return false;">T-shirt farve</a>
<br>3. <a href="http://www.newfashionstyle.com/images/Text_color.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="return false;" onclick="return false;">Tekst farve</a>
<br>4. <a href="http://www.newfashionstyle.com/images/fonts.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="return false;" onclick="return false;">Skrifttype</a>
<br>5. <a href="http://www.newfashionstyle.com/images/place_the_text.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="return false;" onclick="return false;">Placere teksten</a>
<br>6. <a href="http://www.newfashionstyle.com/images/justerer_tekst.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="return false;" onclick="return false;">Justerer tekst</a>
<br>7. <a href="http://www.newfashionstyle.com/images/Din_Egen_Tekst_v2.gif" onmouseover="showURL(this);showBox(411,420,event);" onmouseout="hideBox()" onclick="return false;">Din egen tekst</a> (max. 6 linier)
<br><br>Hvis du ikke kan se ovenstående guide klik her <a target="_blank" href="http://www.newfashionstyle.com/options_guides/">[link]</a>
<br><hr>
<span style="font-size:x-small;font-weight:bold;">Her kan du foretage dine valg</span> (se guiden hvis du er i tvivl)</span>

<div id="minDiv" style="position:absolute;border:2px ridge #222;display:none;overflow:hidden;"><iframe id="minIframe" name="minIframe" src="about:blank" style="width:100%;height:100%;overflow:hidden;"></iframe></div>
<script language="javascript" type="text/javascript">
function showBox(w,h,e) {
  box = document.getElementById("minDiv").style;
  box.left = "500px";
  box.top = "500px";
  box.width = w + 'px';
  box.height = h + 'px';
  box.display = "block";
}
function hideBox(){
  document.getElementById("minDiv").style.display = 'none';
}
function showURL(link){
  window.minIframe.location.href = link.href;
}
</script>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
White papers
Flere white papers »