Avatar billede borrisholt Novice
29. august 2008 - 11:02 Der er 2 kommentarer og
1 løsning

On click på et billede

Hej Eksperter

Jeg er ikek verdens største Javascript programmør, faktisk ved jeg ikke ret meget om området jeg gætter mig bare frem ud fra min viden omkring Delphi og c++ samt hvad jeg kan stjæle rundt omkring ... Så er i advaret ... ;o)

Jeg har en gang skrevet noget der kan vise et billede i browseren og tilbasse størelsen til det plads dokumentet nu en gang har.

Koden ser ud som følger :

<HEAD>
<TITLE></TITLE>

<meta http-equiv="ImageToolbar" content="no">
</HEAD>
<BODY BACKGROUND="lootextb.JPG">

<script language="JavaScript">
  var
    PicWidth  = 3008;
    PicHeight = 2000;

    clientHeight = document.body.clientHeight - 35;
    clientWidth = document.body.clientWidth -20;

    bredde = PicWidth;
    hojde = PicHeight;
    pct = 0;
    bredde1 = 0;
    hojde1 = 0;

    if (PicHeight >= clientHeight)
    {
      hojde =  clientHeight;
      pct =  hojde / PicHeight;
      bredde = PicWidth * pct;


      if (bredde > clientWidth)
      {
        bredde1 = clientWidth;
        pct = bredde1 / bredde;
        hojde1 = hojde * pct;
      }

    }

    else if (PicWidth >= clientWidth)
    {
      bredde =  clientWidth;
      pct =  bredde / PicWidth;
      hojde = PicHeight * pct;
                               

      if (hojde > clientHeight)
      {
        hojde1 = clientHeight;
        pct = hojde1 / hojde;
        bredde1 = bredde * pct;
      }
    }


    if (bredde1)
      bredde = bredde1;
    if (hojde1)
      hojde = hojde1;

  document.write('<img  src="20080823124108.jpg" border=0 alt="" width=" '+bredde+'" height="'+hojde+'">') 

// resize function
  window.onresize = resize;

  function resize()
  {
    history.go(0);
  }
</SCRIPT>
</BODY>
</HTML>


Koden bliver auto genereret af et program jeg har lavet ...

Nu kunne jeg godt tænke mig hvis brugeren holder musen hen over billedet så kommer der en lille pil frem brugeren kan trykke på for at gå til næste billede eller forrige billede afhænigt af om det er i den første eller sidste halvdel af billeder

Altså præcis det samme som den her funktion :
http://photo.severinsen.com/Galleri/bandit/index.html

Det er bare lavet i flash, vha Picassa2

Er der nogen der kan lave det til mig ... Det er tilladt at hardcode filnavnet i forrige og næste billede da der er tale om maskin genereret kode ...

Jens Borrisholt
Avatar billede w13 Novice
29. august 2008 - 12:29 #1
Noget i stil med dette måske?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<body>

<script type="text/javascript">
var tHideArrows=null;
function showArrows(o,sLeftLink,sRightLink){
    var oArrowLeft=document.getElementById("leftarrow");
    var oArrowRight=document.getElementById("rightarrow");
    if(oArrowLeft)oArrowLeft.style.display="block";
    if(oArrowRight)oArrowRight.style.display="block";
    if(!oArrowLeft&&!oArrowRight)createArrows(o,sLeftLink,sRightLink);
}

function createArrows(o,sLeftLink,sRightLink){
    var sArrowLeft="left.png";
    var sArrowRight="right.png";
    var iArrowHeight=40;
    var iArrowWidth=40;

    var iTop=o.offsetTop;
    var iLeft=o.offsetLeft;
    var iHeight=o.offsetHeight;
    var iWidth=o.offsetWidth;

    if(sLeftLink){
        var oImg=document.createElement("img");
        oImg.setAttribute("src",sArrowLeft);
        oImg.onclick=new Function("window.location.href='"+sLeftLink+"'");
        oImg.onmouseover=function(){tHideArrows=window.clearTimeout(tHideArrows);}
        oImg.setAttribute("id","leftarrow");
        oImg.style.cssText="cursor:pointer;position:absolute;top:"+(iTop+(iHeight/2)-(iArrowHeight/2))+"px;left:"+(iLeft+2)+"px";
        o.parentNode.appendChild(oImg);
    }

    if(sRightLink){
        oImg=document.createElement("img");
        oImg.setAttribute("src",sArrowRight);
        oImg.onclick=new Function("window.location.href='"+sRightLink+"'");
        oImg.onmouseover=function(){tHideArrows=window.clearTimeout(tHideArrows);}
        oImg.setAttribute("id","rightarrow");
        oImg.style.cssText="cursor:pointer;position:absolute;top:"+(iTop+(iHeight/2)-(iArrowHeight/2))+"px;left:"+(iLeft+iWidth-iArrowWidth-2)+"px";
        o.parentNode.appendChild(oImg);
    }
}

function hideArrows(){
    var oArrowLeft=document.getElementById("leftarrow");
    var oArrowRight=document.getElementById("rightarrow");
    if(oArrowLeft)oArrowLeft.style.display="none";
    if(oArrowRight)oArrowRight.style.display="none";
}
</script>

<div style="position:relative">
    <img src="test.jpg" onmouseover="showArrows(this,'link.htm?billed=test.jpg','link.htm?billed=test2.jpg')" onmouseout="tHideArrows=window.setTimeout('hideArrows()',50)">
</div>
Avatar billede borrisholt Novice
29. august 2008 - 17:55 #2
Fungerer perfekt !!!
Avatar billede w13 Novice
29. august 2008 - 18:58 #3
Tak for point! :)
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