Avatar billede henriksdb Nybegynder
09. juli 2003 - 21:39 Der er 17 kommentarer og
2 løsninger

JavaScript visbillede

Nu har jeg søgt oppe og nede efter en kode  nu håber jeg at det er en der kan hjælpe.

Efekten af koden skal værer at når man klikker på et billede åbner det sig et nyt vindug uden adresse og hyperlink værktøj  og ingen billede hjælp som det er i win xp
der skal vises dirrekte til jpg billede i en bestemt str fks 400*600

håber i ved hvad jeg mener
og kan hjælpe mig
på forhånd tak
henrik
Avatar billede roenving Novice
09. juli 2003 - 21:41 #1
Denne her tilretter sig billedets størrelse, prøv den og spørg så, hvis der er noget:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Resize til billede</TITLE>
<META NAME="keywords" CONTENT="roenving 2003;http://www.eksperten.dk/spm/364403">
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
  <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
    function popWin(file){
      newWin=window.open("","ResizeBillede","width=300,height=200,status=no");
      txt='<HTML><HEAD><TITLE>Resize til bilede</TITLE><SCR'+'IPT LANGUAGE="javascript" TYPE="text/javascript">';
      txt+='function resPic(){h=document.images[0].scrollHeight;w=document.images[0].scrollWidth;window.resizeTo(w+6,h+32);}</SCR'+'IPT></HEAD>';
      txt+='<BODY STYLE="overflow:hidden;border:0px;margin:0px"><IMG SRC="'+file+'" STYLE="top:0px;left:0px;border:0px;" ONLOAD="resPic();"></BODY></HTML>';
      newWin.document.write(txt);
      newWin.document.close();
    }
  </SCRIPT>
</HEAD>
<BODY>
<A HREF="#" ONCLICK="popWin('../billede.jpg');return false;">klik her</A>
</BODY>
</HTML>
Avatar billede roenving Novice
09. juli 2003 - 21:42 #2
Dette er et helt eksempel -- du skal indsætte en billed-fils navn i tredje-sidste linje og så åbne den i browseren !-)

-- med en fast størrelse bliver koden adskilligt simplere ,-)
Avatar billede susanne_larsen Nybegynder
09. juli 2003 - 22:11 #3
;) denne her er jeg selv ret vild med, men koden er lidt omfattende. Kræver også at du har 2 versioner af samme billede, et i almindelig størrelse, og så en tumbnail-udgave som er den brugeren ser ved indgangen på din side. Scriptet virker dog i en del browsere.

Denne her del indsætter du i <HEAD>
**********************************

<script>

var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all

function enlarge(which,e){
//Render pic kode til IE 4+ og NS6
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (crossobj.style.visibility=="hidden"){
crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX
crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY
crossobj.innerHTML='<div align=right id=drag><b onClick=closepreview()>X</b></div><img src="'+which+'">'
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}
//Render pics kode til NS 4
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
//Hvis der IKKE bruges IE 4+ eller NS 4, vis pic i browser window
else
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

</script>


<script language="JavaScript1.2">

//træk slip funktion til NS 4////
/////////////////////////////////

var nsx,nsy,nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//træk slip funktion til IE 4+ og NS6////
////////////////////////////////////////

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script>

*******************


indsæt denne her i <BODY>

<div id="showimage" style="position:absolute;visibility:hidden;border:1px solid black"></div>


Indsæt dit/dine thumbnails. Tilføj følgende til dine A tags:

onClick="return enlarge('MitBillede.jpg',event)"


ex:
<a href="MitBillede.jpg" onClick="return enlarge('MitBillede.jpg',event)"><img src="LilleBillede.jpg" border="0" alt="Klik for at se billedet i stor størrelse" width="113" height="85"></a>
Avatar billede susanne_larsen Nybegynder
09. juli 2003 - 22:33 #4
se hvordan resultatet er her (hastighed er sløv i dag)

http://www.freewebs.com/suza/ImageThumbs.htm
Avatar billede henriksdb Nybegynder
09. juli 2003 - 23:19 #5
til
Avatar billede henriksdb Nybegynder
09. juli 2003 - 23:21 #6
til roenving
kan man sætte noget ind så når man klikker på det storer bilde man automatisk går til bage til det lille ??
Avatar billede roenving Novice
09. juli 2003 - 23:25 #7
Jo, vil du have det med den funktion, hvor det resizer til billedets størrelse, eller vil du have det med en fast størrelse ?-)

-- selve funktionen hedder bare:
onclick="window.close()"
Avatar billede henriksdb Nybegynder
09. juli 2003 - 23:45 #8
det ved jeg ikke, hvad er best ??
det skal barer værer så man ikke skal til at lukke mange vinduer når man er fÆrdig med at kikke i fotoalbummet
Avatar billede henriksdb Nybegynder
09. juli 2003 - 23:50 #9
<BODY>
<A HREF="#" ONCLICK="popWin('../billede.jpg');return false;">klik her</A>
</BODY>

onclick="window.close()"
hvor skal jeg ligge koden
p.s mange tak for hjælpen
Avatar billede roenving Novice
10. juli 2003 - 00:00 #10
Umiddelbart ville jeg bruge udgaven som tilpassede sig billedet, men det kommer an på to ting:
- Hvis du ved, at alle billeder er samme størrelse er det overkill ...
- Hvis du har enormt store billeder (f.eks. bedste opløsning fra digital-kamera) bliver de så store, at man kun kan se en brøkdel af dem, og så er det billederne der skal tilpasses til en størrelse og ikke omvendt ...

Hvis du trykker på et nyt billede, vil den bare åbne i det samme vindue, da navnet er uændret, så man vil ikke kunne have mange billeder åbne, men denne kode sætter du ind i headeren på din side (illustreret ved </head> nederst):

SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
    function popWin(file){
      newWin=window.open("","ResizeBillede","width=300,height=200,status=no");
      txt='<HTML><HEAD><TITLE>Resize til bilede</TITLE><SCR'+'IPT LANGUAGE="javascript" TYPE="text/javascript">';
      txt+='function resPic(){h=document.images[0].scrollHeight;w=document.images[0].scrollWidth;window.resizeTo(w+6,h+32);}</SCR'+'IPT></HEAD>';
      txt+='<BODY STYLE="overflow:hidden;border:0px;margin:0px"><IMG SRC="'+file+'" STYLE="top:0px;left:0px;border:0px;" ONLOAD="resPic();" onclick="window.close()"></BODY></HTML>';
      newWin.document.write(txt);
      newWin.document.close();
    }
  </SCRIPT>
</HEAD>

På dine thumbnails sætter du linket rundt om ligesom susanne viste det:
<A HREF="#" ONCLICK="popWin('billede_23.jpg');return false;"><img src="thumb_23.jpg"></A>

-- og så har jeg sat window.close-koden ind !-)

hth
jes
Avatar billede henriksdb Nybegynder
10. juli 2003 - 09:40 #11
tak
Avatar billede susanne_larsen Nybegynder
10. juli 2003 - 11:46 #12
>> roenving et noget korte script end mit forslag ;)) Må se at få det afprøvet...
Avatar billede roenving Novice
10. juli 2003 - 13:07 #13
Velbekomme '-)

>>susanne
-- jeg bruger (netop for at holde det slim ,-) IE-metoder, bl.a. scrollHeight og -Width, så i kompatibilitet kan det jo ikke hamle op med din !-)
Avatar billede susanne_larsen Nybegynder
10. juli 2003 - 20:43 #14
>>roenvig nej den er ikke kompatibel med andre browsere, men kort er den ;)

>> henriksdb hvorfor afviser du mit svar ? du efterlyser en kode der ved klik på thumbnail åbner et nyt vindue uden hoved m.m. og det kan du med det script jeg har listet.
Ved godt den ser noget voldsom ud, men det skyldes bl.a. at scriptet fungerer under andre browsere end IE. Scriptet er ikke svært at opdatere da det eneste du behøver at rette er <a heref .....> strengen
Avatar billede henriksdb Nybegynder
10. juli 2003 - 22:43 #15
att susanne Larsen jeg kom til at trykke på den forkerte knap men jeg har rettet fejlen du har fået 50 poin for dit gode svar håber det er i orden
Avatar billede roenving Novice
10. juli 2003 - 23:18 #16
-- takker for points ;~}
Avatar billede susanne_larsen Nybegynder
14. juli 2003 - 19:52 #17
;) thnx er mere end rigeligt - var dog ikke fordi jeg ville rende med næsten samtlige p. Blev bare lidt hmmm over at du blankt uden nogen kommentar afviste mit svar .p

>>roenvig vil du have nogen af de 50 jeg har fået ? Du har jo været en del mere aktiv i denne tråd end jeg har.....
Avatar billede roenving Novice
14. juli 2003 - 21:56 #18
>>points ?-)

Næh, jeg har jo fået no'en !-)

-- og er heller ik' en, som li'e står og mangler ...
Avatar billede susanne_larsen Nybegynder
15. juli 2003 - 12:11 #19
GH** fint nok.... beholder dem så
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester