|
|
 | Åbne et nyt prompt vindue
Fra :  baller | Vist : 603 gange
200 point
Dato : 23-05-07 10:48 |
|
Hej
Vi sidder manger lidt hjælp til et hjemmeside der skal indeholde en række billeder og ved enten at mouseover eller klikke på et pågældende billede ville vi gerne have det til at åbne et nyt vindue(browser) i en bestemt størrelse. Det nye vindue skule gerne IKKE indehold søgebar, titlebar eller
andet.
Vi skriver i ASPX og .NET men et java script ville sikkert også kunne gå.
På forhånd tak.
Baller og Peder
| |
 | Kommentar
Fra : molokyle  |
Dato : 23-05-07 11:28 |
|
Mange løsninger!
Dynamisk pop-up:
Kode
<html>
<title>Resizeble dynamic window opener</title>
<head>
<script type="text/javascript">
<!--
function expandingWindow(website,x_dim,y_dim) {
var heightspeed = 8; // vertical scrolling speed (higher = slower)
var widthspeed = 8; // horizontal scrolling speed (higher = slower)
var leftdist = (screen.width - x_dim) / 2;
var topdist = (screen.height - y_dim) / 2;
if (document.all) {
var winwidth = window.screen.availWidth - (window.screen.availWidth - x_dim);
var winheight = window.screen.availHeight - (window.screen.availHeight - y_dim);
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist + ",width=1,height=1,location=yes,menubar=yes,scrollbars=yes,status=yes,titlebar=yes,resizable=yes,toolbar=yes");
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed) {
sizer.resizeTo("1", sizeheight);
}
for (sizewidth = 1; sizewidth < winwidth+widthspeed; sizewidth += widthspeed) {
sizer.resizeTo(sizewidth, sizeheight);
}
sizer.location = website;
}
else
window.location = website;
}
//-->
</script>
</head>
<body>
<span onmouseover="this.style.cursor='pointer';" onClick="expandingWindow('http://dmi.dk',640,480);return false;">DMI 640 x 480</span>
</body>
</html> |
For at fjerne browser titlebar mm. så må I ændre:
location=yes,menubar=yes,scrollbars=yes,status=yes,titlebar=yes,resizable=yes,toolbar=yes
..til:
location=no,menubar=no,scrollbars=no,status=no,titlebar=no,resizable=no,toolbar=no
Her i en løsning i fuldskærm:
Kode
<html>
<head>
<script type="text/javascript">
<!--
function Full(url)
{
window.open(url,'_blank','fullscreen=yes');
}
//-->
</script>
</head>
<body>
<span style="cursor:pointer" onclick="Full('http://www.dmi.dk')">DMI</span>
</body>
</html> |
Bemærk at browservinduet lukkes med ALT + F4 !
Begge scripts virker også med en henvisning til et billede.
Ved mouseover bruges eventen onmouseover i stedet for eventen onclick.
Men hvorfor en browser pop-up? Det laves da smartere med CSS 
http://www.cssboxing.com/temp/textmouseover.html
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 23-05-07 11:31 |
| | |
| Kommentar
Fra : molokyle |
Dato : 23-05-07 11:38 |
| | |
| Kommentar
Fra : molokyle |
Dato : 24-05-07 00:10 |
| | |
| Kommentar
Fra : baller |
Dato : 24-05-07 09:27 |
|
Hej og takker vi prøver det, ser ud til det er noget vi leder efter, i sær den sidste men kan man ikke tilføje en luk knap på det nye vindue ? Så man ikke skal trykke i det røde kryds.
| |
| Kommentar
Fra : molokyle |
Dato : 24-05-07 10:19 |
|
En lukkeknap kan tilføjes et vindue således:
Kode
<input type='button' value='Luk' onclick='window.close()'> |
</MOLOKYLE>
| |
| Kommentar
Fra : baller |
Dato : 24-05-07 12:16 |
| | |
| Accepteret svar
Fra : molokyle | 
Modtaget 200 point
Dato : 28-05-07 12:26 |
|
Hvad er problemet? I skal da bare vælge 'Vis kilde' på siden, så står både CSS og XHTML da til rådighed.
CSS:
Kode
<style type="text/css">
#gallery {position:relative; width:750px;}
#thumbs {width:180px; float:right;}
#thumbs a {display:block; float:left; margin:0 0 5px 5px; width:50px; height:50px; border:1px solid #000;}
#thumbs a img {width:50px; height:50px; border:0;}
#thumbs a:hover {border-color:#ddd;}
#thumbs a:hover img {position:absolute; width:auto; height:auto; right:185px; top:0; border:1px solid #333;}
</style> |
XHTML:
Kode
<div id="gallery">
<em id="thumbs">
<a href="#nogo"><img src="trees/t1.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t2.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t3.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t4.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t5.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t6.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t7.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t8.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t9.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t10.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t11.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/p1.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t13.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t14.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t15.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t16.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t17.jpg" title="" alt="" /></a>
<a href="#nogo"><img src="trees/t18.jpg" title="" alt="" /></a>
</em>
</div> |
På alle Stu' sider finder du eksemplet som et lokalt stylesheet og den korrensponderende XHTML kode mellem id'en 'info' i en DIV:
Kode
<div id="info">
.
.
</div> <!-- end of info --> |
..men 'sorter' liiiiige Google adsie'en fra:
Kode
<div id="adsie">
.
.
</div> |
</MOLOKYLE>
| |
 | 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.
| |
|
|