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

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Popop vindue via billede
Fra : Kokane
Vist : 738 gange
100 point
Dato : 04-01-07 15:15

Jeg er ved at lave hjemmesiden www.dengulefar.dk men der er opstået et lille problem under menuen "statistik".
Jeg vil gerne lave et pop-up vindue med følgende størrelse W800 & H 491. Det er lykkedes mig at gøre det, når man klikker på den tekst der er under et af de fire billeder, ”mål”, ”stemmer” etc.
Mit problem er at jeg ikke kan få det til at virke når man klikker på et af billederne. Når man klikker på et af billederne så åbner den nye fil blot inde i iframen.

Min forklaring er måske lidt rodet, men hvis du kigger på siden er jeg sikker på du forstår.

Jeg kan ikke kode i java, jeg har blot fundet et tag der har løst problemet i forbindelse med at man klikker på teksten…..men mangler et tag der løser problemet når man klikker på billedet…..

Håber der er nogen der kan hjælpe.

Min kode til siden ser således ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   background-color: #000000;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #999999;
}
a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #999999;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #999999;
}
a:hover {
   text-decoration: none;
   color: #FFFFFF;
}
a:active {
   text-decoration: none;
   color: #999999;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<STYLE type=text/css>
<!--
html{
{SCROLLBAR-FACE-COLOR: #333333;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ffff00;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000; }
</STYLE>
</head>

<body onload="MM_preloadImages('grafik/stat_rollover.gif')">
<table width="750" height="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="150" align="center" valign="bottom"><div align="center"><a href="maal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('test','','grafik/stat_rollover.gif',1)"><img src="grafik/stat_no_rollover.gif" alt="image" name="test" width="200" height="123" border="0" id="test" /></a></div></td>
<td height="150" align="center" valign="bottom"><div align="center"><a href="stemmer.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','grafik/stat_rollover.gif',1)"><img src="grafik/stat_no_rollover.gif" alt="image" name="Image2" width="200" height="123" border="0" id="Image2" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="" onclick="window.open('maal.html',
'mitvindue','width=800,height=491');return false;">M&aring;l</a></div></td>
<td><div align="center"><a href="" onclick="window.open('stemmer.html',
'mitvindue','width=800,height=491');return false;">Stemmer</a></div></td>
</tr>
<tr>
<td height="150" align="center" valign="bottom"><div align="center"><a href="maal_kamp.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','grafik/stat_rollover.gif',1)"><img src="grafik/stat_no_rollover.gif" alt="image" name="Image3" width="200" height="123" border="0" id="Image3" /></a></div></td>
<td height="150" align="center" valign="bottom"><div align="center"><a href="stemmer_kamp.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','grafik/stat_rollover.gif',1)"><img src="grafik/stat_no_rollover.gif" alt="image" name="Image4" width="200" height="123" border="0" id="Image4" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="" onclick="window.open('maal_kamp.html',
'mitvindue','width=800,height=491');return false;">M&aring;l pr. kamp</a></div></td>
<td><div align="center"><a href="" onclick="window.open('stemmer_kamp.html',
'mitvindue','width=800,height=491');return false;">Stemmer pr. kamp</a></div></td>
</tr>
<tr>
<td height="30" colspan="2"><div align="center"><a href="statistik/DGfkamp_test.xls" target="_blank">Se komplet statistik her</a> </div>
<div align="center"></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

VH
Kokane


 
 
Kommentar
Fra : disken


Dato : 04-01-07 18:19
Kommentar
Fra : disken


Dato : 04-01-07 18:52
Accepteret svar
Fra : bentjuul

Modtaget 100 point
Dato : 04-01-07 20:01

Prøv at udskift din kode med nedenstående, hvor jeg har indføjet target=_blank fire steder - det er ikke afprøvet, men jeg tror det virker.

Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   background-color: #000000;
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}
body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #999999;
}
a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #999999;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #999999;
}
a:hover {
   text-decoration: none;
   color: #FFFFFF;
}
a:active {
   text-decoration: none;
   color: #999999;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<STYLE type=text/css>
<!--
html{
{SCROLLBAR-FACE-COLOR: #333333;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ffff00;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000; }
</STYLE>
</head>

<body onload="MM_preloadImages('grafik/stat_rollover.gif')">
<table width="750" height="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="150" align="center" valign="bottom"><div align="center"><a href="maal.html" target="_blank" onmouseover="MM_swapImage('test','','grafik/stat_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="grafik/stat_no_rollover.gif" alt="image" name="test" width="200" height="123" border="0" id="test" /></a></div></td>
<td height="150" align="center" valign="bottom"><div align="center"><a href="stemmer.html" target="_blank" onmouseover="MM_swapImage('Image2','','grafik/stat_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="grafik/stat_no_rollover.gif" alt="image" name="Image2" width="200" height="123" border="0" id="Image2" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="" onclick="window.open('maal.html',
'mitvindue','width=800,height=491');return false;">M&aring;l</a></div></td>
<td><div align="center"><a href="" onclick="window.open('stemmer.html',
'mitvindue','width=800,height=491');return false;">Stemmer</a></div></td>
</tr>
<tr>
<td height="150" align="center" valign="bottom"><div align="center"><a href="maal_kamp.html" target="_blank" onmouseover="MM_swapImage('Image3','','grafik/stat_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="grafik/stat_no_rollover.gif" alt="image" name="Image3" width="200" height="123" border="0" id="Image3" /></a></div></td>
<td height="150" align="center" valign="bottom"><div align="center"><a href="stemmer_kamp.html" target="_blank" onmouseover="MM_swapImage('Image4','','grafik/stat_rollover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="grafik/stat_no_rollover.gif" alt="image" name="Image4" width="200" height="123" border="0" id="Image4" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="" onclick="window.open('maal_kamp.html',
'mitvindue','width=800,height=491');return false;">M&aring;l pr. kamp</a></div></td>
<td><div align="center"><a href="" onclick="window.open('stemmer_kamp.html',
'mitvindue','width=800,height=491');return false;">Stemmer pr. kamp</a></div></td>
</tr>
<tr>
<td height="30" colspan="2"><div align="center"><a href="statistik/DGfkamp_test.xls" target="_blank">Se komplet statistik her</a> </div>
<div align="center"></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>


//bentjuul

Kommentar
Fra : molokyle


Dato : 05-01-07 10:09

target="_blank" er en mulig løsning som bentjuul skriver, men du kan også bruge en javascript funktion: http://www.infimum.dk/HTML/JSwindows.html#ref_3_2

Din side validerer dog ikke korrekt i forhold til din angivne !DOCTYPE som er XHTML 1.0 transitional DTD. Der er 13 fejl på siden! http://validator.w3.org/

Mere om XHTML på dansk: http://www.netexplorer.dk/XHTML_TUTORIAL/index.php

</MOLOKYLE>



Kommentar
Fra : molokyle


Dato : 05-01-07 10:11
Kommentar
Fra : disken


Dato : 07-01-07 21:01

Dette kan det ??????med Roolover, tror jeg.
Eller s er det lidt svært at se, hvad du mener.
-------
Men kan da se du har fået lavet en popup,
den kan laves pænere, men hva__

http://www.steenmartinsen.dk/dex/programmer/mobw2_2.rar

Kommentar
Fra : disken


Dato : 07-01-07 21:05

Hvis du brugte mit lille program, kan du også få
billedet til at poppe up, bare ved at føre musen over billedet
Og bruger du flere vinduer, på samme side, så
husk at kalde vinduet noget andet, eller åbner alle i samme
størrelse og så videre.

Kommentar
Fra : molokyle


Dato : 08-01-07 14:59

Pop-up ved mouseover eventen kan klares uden javascript i ren CSS:

http://www.cssplay.co.uk/menu/pop_ups.html

Dette ikke blot som i eksemplet på link <a> .. </a> marøren, men også blokelementer som; <div> .. </div> og <p> .. </p> ..eller inline elementet <span> .. </span>.

Hér følger de relevante dele af koden:

CSS delen:
Kode
<style type="text/css">
#info p {margin-left:15px; margin-right:20px;}

a.screen, a.screen:visited {
color:#c00;
position:relative;
z-index:1;
}
a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:200px; /* give it a width */
height:0; /* no height to solve an Opera bug that makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:0; /* position:the image */
top:-150px;
}
a.screen:hover {
text-decoration:none;
border:0; /* needed for this to work in IE */
z-index:1000;
}
a.screen:hover b {
visibility:visible; /* make the image visible */
height:150px; /* now give it a height */
cursor:pointer; /* for IE */
z-index:500;
}
a.screen:hover b img {
border:0; /* remove the link border */
}

</style>


(X-)HTML delen:
Kode
<div id="info">

<h2>Pop-up images on inline links</h2>
<h3>20th July 2006</h3>

<p>Based on the javascript version that can be found here <a class="screen" href="http://lab.arc90.com/2006/07/link_thumbnail.php">Link Thumbnails<b><img src="http://webdesignbook.net/snapper.php?url=lab.arc90.com&amp;w=200&amp;h=150" alt="website image" title="website image" /></b></a> and my previous design for menu links, this one uses only CSS. This does mean that you will have to insert the image information by hand, but that is not really a problem. So links to <a class="screen" href="http://www.cssplay.co.uk">this web site<b><img src="http://webdesignbook.net/snapper.php?url=www.cssplay.co.uk&amp;w=200&amp;h=150" alt="website image" title="website image" /></b></a> can now have images on display. Let's see how long before this new site layout is displayed.</p>
<p>As well as these MSNs screen dumps you can also use any image you like, for instance if you were describing a <a class="screen" href="#nogo">sparrow<b><img src="graphics/sparrow_thumbnail.jpg" alt="sparrow" title="sparrow" /></b></a> you could have a pop-up image to show your visitors. This could be a link or just a reference image.</p>

<div id="adsie">
<script type="text/javascript">
google_ad_client = "pub-6651950180071236";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "000000";
google_color_url = "bc8f8f";
google_color_text = "006699";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

</div> <!-- end of info -->


Ps. Du skal selvfølgelig rette til efter dit eget ønske.

</MOLOKYLE>

Godkendelse af svar
Fra : Kokane


Dato : 25-01-07 11:59

Tak for svaret bentjuul.

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177414
Tips : 31962
Nyheder : 719565
Indlæg : 6407844
Brugere : 218876

Månedens bedste
Årets bedste
Sidste års bedste