/ Forside/ Teknologi / Multimedie & design / FrontPage / Spørgsmål
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
FrontPage
#NavnPoint
1  molokyle 3730
2  bentjuul 3355
3  BjarneD 2776
4  dk 1515
5  emesen 1490
6  strarup 1480
7  catbody 1241
8  brokke44 1160
9  er_du_klog 1052
10  PARKENSS 1050
billede hyperlink
Fra : panserkran 		Vist : 766 gange
200 point
Dato : 18-08-07 09:34
Jeg laver en hjemmeside hvor der bliver sat billede ind i størrelsen 300 x 225 pixel og har så lavet sådan at hvis man trykker på billedet virker det som et hyperlink til en ny side med et større billede som fylder hele skærmen og det er i for sig også godt nok.
Men nu har jeg set på nogle andre websteder at man bare kan trykke på et mindre billede og det så derefter åbner som et seperat større billede midt på skærmen, dog uden at det åbner en ny side som man derefterskal lukke på normal vis efter den er åbnet. Derefter kan man bare trykke på billedet igen og det lukker af sig selv og det syntes jeg jeg jo er temlig smart. Er det mulig at lave dette i frontpage med evt. en HTML kode eller findes det i programmet.

Mvh Panserkran

 
 
Kommentar
Fra : klanger

Dato : 18-08-07 09:49
Jeg ved ikke helt om du kan "nøjes" med FP egen billedgalleri?

Gå ind under webkomponenter og find billed galleri....og eksperimenter lidt der.

Eller opgså kan du jo prøve http://jalbum.net/supporting.jsp som er et udmærket program til billeder.

Jeg ved ikke om dette hjalp dig lidt videre.... men go' weekend


Kommentar
Fra : molokyle

Dato : 18-08-07 10:07
Den nævnte funktion kan implementeres på flere måder, hvoraf nogen kræver mere teknisk indsigt end andre. For at tage den fra en ende af i stigende 'sværhedsgrad':

1.) Benyt en frame eller iframe til at vise billedet i. Kyn denne frame/iframe vil opdateres ved et klik på 'miniaturen'.

2.) Brug javascript til direkte at manipulere et (X-)HTML DOM element. Man kan dertil f.eks. benytte DOM funktionen innerHTML();

3.) Man kan lave en CSS løsning, hvor billederne (pre-)loades ind på siden på en angiven position. Ved klik på et link kan man bestemme om det refererede element skal vises eller ej ved brug af CSS egenskaberne: display og visibility.

4.) Implementere funktionaliteten vha. Javascript og HTTP server requests. Denne teknik kandels AJAX (Asynchronous JavaScript And XML) og benytter et Javascriptkald til objektet: XMLHttpRequest

Selv vil jeg mene at [B]3.) CSS[B] helt klart er den mest 'brugervenlige' løsning, både når det kommer til krav om klientens browseropsætning og mht. vedligeholdelse af galleriet fremover.

Her er mange eksemplet på sådanne CSS løsninger: http://www.cssplay.co.uk/menu/

Se under afsnittet: Demos - Photo galleries

En simpel og nem løsning er f.eks.: http://www.cssplay.co.uk/menu/photo_simple

Koden finder du i eksemplerne ved at højreklikke på skærmen og vælge : Vis kilde...

CSS koden står i <head> .. </head> sektionen mellem:
Kode
<style type="text/css">
.
.
.
</style>


..og i <body> .. </body> sektionen mellem:
Kode
<div id="info">
.
.
.
.
</div> <!-- end of info -->


Du skal selvfølgelig selv rette de relevante billednavne og dimensioner til hvis du kopiere koden af.

Hvis du ikke ved noget om CSS? Så vil jeg anbefale dig at kaste et blik på:

http://www.w3schools.com/css/default.asp

</MOLOKYLE>

Kommentar
Fra : brokke44

Dato : 18-08-07 10:08
Prøv at læse dette:

http://www.html.dk/artikler/00004/

Kommentar
Fra : molokyle

Dato : 18-08-07 10:14
brokke44 -> Der er i dit link tale om pop-ups ...IKKE at det sker på SAMME side
Citat
..åbner som et seperat større billede midt på skærmen, dog uden at det åbner en ny side


</MOLOKYLE>

Kommentar
Fra : brokke44

Dato : 18-08-07 10:59
Citat
Der er i dit link tale om pop-ups


Det er jeg klar over, men du kan da godt lave en popup i samme vindue.

Linket er medtaget, for at spørgeren kan vurdere forskellige muligheder.

Kommentar
Fra : panserkran

Dato : 18-08-07 13:50
Jeg beklager at at jeg ikke tænkte over at det hedder pop-ups men det er nemlig på den måde jer gerne vil have billedet

Kommentar
Fra : molokyle

Dato : 18-08-07 19:02
Ok. POPUP's ?
..så er der meget mere at lære her:

1.) http://www.mcli.dist.maricopa.edu/tut/tut27c.html
2.) http://www.infimum.dk/HTML/JSwindows.html#ref_3_2 (..RIGTIG god introduktion !)

....OG tjek liiiiige denne 'smarte' kode ud:
Kode
==============================================================
Script: Amazing Draggable Layer

Functions: This script implements a draggable layer that
can be used much like a popup window... but with-
out the usual focus problems that popups often
imply. Also included are simple controls to show
or hide the draggable layer. Compatible with
NS4-7 & IE.

Comments: The script is in two parts. A JavaScript
<script> to be placed in the <head> of the
page; and a <div> layer that should be placed
either immediately after the <body> tag or
immediately before the </body> tag.

There are *no* changes or setups required in the
JavaScript script.

Positioning, width, height, colors, fonts, etc.,
as well as initial visibility are set in the
layer portion of the script, in the body.

Notes: Only a single instance of the script is allowed
per page.

Browsers: NS4-7 & IE4 and later

Author: etLux
==============================================================



STEP 1.
Inserting the JavaScript <script> In Your Page

Put the following <script> </script> in the head
section of your page.

There are no setups or changes required.



<script language="JavaScript1.2">

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}

function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}

function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}

function hideMe(){
if (isIE||isNN) whichDog.style.visibility="hidden";
else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
if (isIE||isNN) whichDog.style.visibility="visible";
else if (isN4) document.theLayer.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

</script>



==============================================================



STEP 2.
Inserting The Layer Code In Your Page

Insert the following code in the body of your page. It may be
placed either immediately after the <body> tag or
immediately before the </body> tag.

This is essentially a couple of nested tables inside a <div>

Colors and spacing are set with the usual table features
(bgcolor, cellpadding).

The width, height, left and top position are set in the style
in the <div> tag.

Likewise, if you want the layer to be initially invisible, set
visibility:visible instead to visibility:hidden in the style.

(To show or hide the layer from a JavaScript link function
call see the following Step 3.)

Your content goes in the commented area, as shown. It can be
most any html code or text, though additional div or table
tags within the designated content area should be done with
care, and checked in all browser versions.

To change the titlebar text, find the words Layer Title and
replace them with your title.



<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible">
<table border="0" width="250" bgcolor="#424242" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Arial" color="#FFFFFF">Layer Title</font>
</layer>
</ilayer>
</td>
<td style="cursor:hand" valign="top">
<a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial style="text-decoration:none">X</font></a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<!-- PLACE YOUR CONTENT HERE //-->
This is where your content goes.<br>
It can be any html code or text.<br>
Remember to feed the reindeer.<br>
Avoid chewable giblet curtains.
<!-- END OF CONTENT AREA //-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->



==============================================================



STEP 3. (Optional)
Using Show And Hide Controls

The layer can be shown or hidden via simple function calls.

To show the layer:

<a href="javascript:showMe();">show</a>

To hide the layer:

<a href="javascript:hideMe();">hide</a>



============================[end]=============================


..så kan du 'slippe' for at layout'e vha. et 'standard' vindue

..men tjek lige også løsninger som f.eks. denne:

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

..fra min egen hjemmeside (= stadig under konstruktion ! )

</MOLOKYLE>

Kommentar
Fra : panserkran

Dato : 20-08-07 22:11
Jeg må indtømme at det virker som en meget stor kode for at kunne få et billede til at åbne og lukke blot ved at trykke på det og så er jeg ikke helt klar over hvordan man sætter koden ind ?



Accepteret svar
Fra : brokke44
Modtaget 200 point
Dato : 20-08-07 22:46
Denne er lidt mere overskuelig med fine forklaringer:

http://www.html.dk/artikler/00004/

Godkendelse af svar
Fra : panserkran

Dato : 21-08-07 18:38
Hej brokke44 jeg har været ved og kikke på dit link som du indsatte tidligere og har også været ved at prøve og få koderne sat ind fra dit link men jeg skal nok have kikket lidt mere på det før jeg kan få det til at virke

Men tak for svaret brokke44

Kommentar
Fra : brokke44

Dato : 21-08-07 18:58
Selv tak.

Ja, det er ikke nemt i begyndelsen, men når man een gang har fået føling med det, går det næsten pr. automatik.

Til "simple" hjemmesider bruger jeg selv FrontPage, der laver alt arbejdet for dig.
Med min begrænsede kunnen tilpasser jeg derefter koderne, hvor FP kommer til kort.

Hvis MOLOnørden ser dette bliver jeg overfaldet - han ringeagter os simple FP-brugere, hvilket egentlig er uforståeligt. Det tager virkeligt megen tid at sætte sig ind i.

God fornøjelse.

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 : 177549
Tips : 31968
Nyheder : 719565
Indlæg : 6408820
Brugere : 218887
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.