/ Forside/ Teknologi / Internet / Website's / Spørgsmål
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
Website's
#NavnPoint
1  Klaudi 7613
2  molokyle 7332
3  refi 3006
4  jangchr 2550
5  katekismus 2030
6  bentjuul 1884
7  EXTERMINA.. 1570
8  o.v.n. 1540
9  marken84 1470
10  disken 1359
Dreamweaver MX
Fra : syllemus 		Vist : 537 gange
300 point
Dato : 09-03-07 22:36
Hej

Jeg er i gang med at lave en hjemmeside.
Mit spørgsmål lyder:

Jeg vil gerne kunne vise et billede, og ikke en side med et billede på. Altså kun selve billedet skal åbne. F.eks ligesom på www.dba.dk når man sidder med en annonce og ikke er interesseret i at læse den, har man den mulighed at åbne et billede at det annoceret.
Hvordan gør man det?

Håber i forstår hvad jeg mener

Syllemus

 
 
Kommentar
Fra : CLAN

Dato : 09-03-07 23:11
Hejsa
Nu kender jeg ikke Dreamweaver særligt godt, men jeg ville da fristes til at benytte et Java-script. Evt på et pop-up vindue - se script på http://www.html.dk/scripts/javascript/00023/ og et eksempel på: http://www.html.dk/scripts/javascript/00023/eksempel.asp#
Der er iøvrig meget godt på siden, måske noget du kan bruge.
Hvis det ikke er det du er på udkig efter, så vent og se hvad andre kommer med.
Go' weekend
Søren


Kommentar
Fra : disken

Dato : 10-03-07 01:26
Kommentar
Fra : molokyle

Dato : 10-03-07 02:08
Glem javascript (..det virker ikke for de som har slået scripting fra!) og brug istedet ren CSS, spar plads og download latency.

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

(..ef en eller anden grund er det i øjeblikket kun linket 'sparrow' som fungerer efter hensigten. Jeg tror at de 2 andre *.jpg'er har mistet 'pusten' )


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>


..og (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> <!-- end of info -->


Tjek evt. koden lidt længere nede på siden:
Kode
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 */
}
The xhtml
The typical link:

<a class="screen" href="http://www.cssplay">this web site<b><img src="http://webdesignbook.net/snapper.php?url=www.cssplay.co.uk&w=200&h=150" alt="website image"title="website image" /></b></a>


..men det er lidt svært at forstå hvad du mener?

Jeg kan ikke se noget af det du skriver om på http://www.dba.dk/ ???

( Læg evt. et deep-link til den specifikke side her på kandu.dk )

Jf.
Citat
..har man den mulighed at åbne et billede at det annoceret.


???

</MOLOKYLE>


Kommentar
Fra : molokyle

Dato : 10-03-07 02:10
Her er et andet eksempel i ren CSS: http://www.cssplay.co.uk/menu/balloons.html

</MOLOKYLE>

Kommentar
Fra : syllemus

Dato : 10-03-07 09:25
Hej Igen

Billedet ligger sikkert på en side, men når man åbner billedet, må siden ikke være større en selve billedet. Siden skal være uden adresselinie.

Her er et eks. Hvis i klikker på kameraet, popper der et billede frem.

http://www.dba.dk/asp/Soegning/soegning.asp?RubrikId=40000

Accepteret svar
Fra : molokyle
Modtaget 300 point
Dato : 10-03-07 10:27
Så kan du da bruge et alm. pop-up link i HTML :
Kode
<a href="http://www.dmi.dk/" title="DMI" target="_blank">DMI</a>


I stedet for http://www.dmi.dk/ og teksten DMI indsætter du et link til en side, hvor du kun har koden til at vise dit billede:
Citat
<img src="MIT_BILLEDE.JPG" alt="MIT_BILLEDE" title="MIT_BILLEDE" />


..men din side bør så angive den korrekte !DOCTYPE:

1.) http://www.upsdell.com/BrowserNews/res_doctype.htm
2.) http://www.ericmeyeroncss.com/bonus/render-mode.html

Du får dog åbnet vinduet i et alm. browservindue, med de indstillinger som dine besøgende bruger.

..som sagt er det ikke 'pænt' at ændre folks browserindstillinger ved pop-up's, men du kan gøre det således alligevel hvis du synes:

http://www.infimum.dk/HTML/JSwindows.html#ref_3_2

Personligt ville jeg foretrække den CSS 'teknik' som demostreres her:

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

Du kan anvende alle ovenstående teknikker vha. eventen onmouseover på linket. Det er sådan de gør på dba.dk:

onmouseover:
Kode
onMouseOver="positionPop(event,'http://images.dba.dk/images/1/92/48545292_14122006214933_4229_1.jpg');


..onmouseout:
Kode
onMouseOut="hidePop();"


De to javascriptfunktioner positionPOP og hidePOP har jeg ikke umiddelbart kunne finde i dba's 'spagettikode', men de hidrører sikkert fra et eller andet standard bibliotek de har hentet 'ude i byen' eller bestilt hos et webfirma

Derfor kan jeg ikke give dig implementationsdetaljerne ...som sikkert også ville komme i konflikt med loven om ophavsret !

Scriptene på siden 'blander' CSS og DOM tilgang (eventmanipulation) vha. javascript.

</MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 10-03-07 10:33
Her er hvorledes jeg ville implementere en simpel udgave af ovenstående DBA kode vha. HTML billedmarkøren, events og DOM:
Kode
<img src="BILLEDE1.gif" onmouseover="this.src='BILLEDE2.gif'" onmouseout="this.src='BILLEDE1.gif'" onclick="window.location='http://www.kandu.dk'" style="cursor:pointer" />


Du må selv ændre billederne: BILLEDE1.gif, BILLEDE2.gif og URL'en http://www.kandu.dk til det du ønsker.

KISS (Keep It Simple Stupid...)

</MOLOKYLE>

Godkendelse af svar
Fra : syllemus

Dato : 10-03-07 11:42
Tak for svaret 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.
Søg
Reklame
Statistik
Spørgsmål : 177428
Tips : 31962
Nyheder : 719565
Indlæg : 6407936
Brugere : 218877
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.