Avatar billede coffee Nybegynder
17. maj 2004 - 18:08 Der er 5 kommentarer og
1 løsning

Linker til billede. Hvordan får man det til at centrere i vindue?

Hej. Mit spørgsmål er: Jeg har et link til et billede. Når jeg trykker på linket dukker billedet op i den valgte ramme, men hvordan får jeg billedet til at centrere?
Et tillægsspørgsmål: Hvis jeg har en baggrund i den valgte ramme hvor billedet skal dukke op, så bliver den hvid med billedet ovenpå. Hvis jeg gerne vil beholde baggrundsbilledet jeg har valgt, men med billedet ovenpå, hvad gør jeg så??
Ps. Jeg har ikke den store forstand på html, så ikke noget med speciellle scripts..
Avatar billede olebole Juniormester
17. maj 2004 - 18:31 #1
<ole>

Hvis du bare linker til et billede:
  <a href="mitPic.jpg" target="_blank">Link</a>
så har du ingen kontrol over, hvordan det vises. Vil du bestemme noget, skal du linke til en HTML-fil med billedet i  :)

/mvh
</bole>
Avatar billede webcreator Nybegynder
17. maj 2004 - 18:34 #2
Når du åbner dit billede, så er det ikke en side med billedet, du ser, men blot billedet alene. Dvs. du ikke kan bestemme, hvordan tingene skal se ud og placeres. Du bliver altså nød til, at lave en HTML fil til hvert billede.

En anden mulighed er, at lave det dynamisk - dvs. én side, hvori alle billeder hentes vha. en variabel. (kræver dog lidt kendskab til fx. ASP eller PHP)
Avatar billede olebole Juniormester
17. maj 2004 - 18:43 #3
Nuvel, det behøver man nu ikke at blande PHP eller ASP ind i det for - det kan også laves i ren frontend kode.
Men da du ikke er til 'specielle scripts' må du nok gøre, som jeg startede med at skrive: Linke til en HTML-fil med billedet i  :)
Avatar billede coffee Nybegynder
17. maj 2004 - 18:50 #4
Tak for svaret, Ole og webcreator..
Så er der lidt mere arbejde i det end jeg lige havde regnet med..
Point givet til Ole, da han svarede først..
Avatar billede olebole Juniormester
17. maj 2004 - 19:58 #5
Tak, for points  :)
Det behøver nu ikke være så kompliceret. Du kan f.eks. skrive en fil, der hedder 'image.html' og indeholder dette:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body {
    background-color: red;
}
#picDiv {
    text-align: center;
}
#picDiv img {
    margin: 40px auto;
}
</style>
<script type="text/JavaScript">
function getImg() {
    var err, loc, img;
    err = "Der opstod en fejl.";
    if ( location.href.indexOf("?")==-1 ) return err;
    loc = location.href.split("?")[1];
    if ( loc.indexOf("=")==-1 ) return err;
    img = loc.split("=");
    if ( img[0]!="imgSrc" || img[1]=="" ) return err;
    return "<img src='"+img[1]+"'>";
}
</script>
</head>
<body>

<div id="picDiv">

<!-- Skriv billedet ud her: -->
<script type="text/JavaScript">document.write( getImg() )</script>

</div>

</body>
</html>

---------------------------------

Så kan du kalde med:
  <a href="image.html?imgSrc=mit_billede.jpg">Test</a>
eller:
  <a href="#" onclick="window.open('image.html?imgSrc=mit_billede.jpg','pop','width=500,height=700');return false">Test</a>

... eller hvordan du nu plejer at kalde  :)
/mvh
Avatar billede olebole Juniormester
17. maj 2004 - 20:33 #6
Eller måske sådan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
body {
    background-color: red;
}
#picDiv {
    text-align: center;
}
#picDiv img {
    margin: 40px auto;
}
</style>
<script type="text/JavaScript">
function getImg() {
    var err, picDiv, vars, loc, varPairs, thisVar;
    err = "Der opstod en fejl.";
    picDiv = document.getElementById("picDiv");
    vars = new Array();
    if ( location.href.indexOf("?")==-1 ) {
        picDiv.innerHTML = err;
        return false;
    }
    loc = location.href.split("?")[1];
    varPairs = loc.split("&");
    for ( i=0; i<varPairs.length; i++ ) {
        if ( varPairs[i].indexOf("=")!=-1 ) {
            thisVar = varPairs[i].split("=");
            vars[thisVar[0]] = unescape( thisVar[1] );
        }
    }
    if ( !vars["imgSrc"] || vars["imgSrc"]=="" ) {
        picDiv.innerHTML = err;
        return false;
    }
    picDiv.innerHTML = "<img src='"+vars["imgSrc"]+"'>";
    if ( vars["imgTxt"] ) picDiv.innerHTML += "<br>"+vars["imgTxt"];
    if ( vars["title"] ) document.title = vars["title"];
}
window.onload = getImg;
</script>
</head>
<body>

<div id="picDiv"></div>

</body>
</html>

--------------------------------------
Så kan du sætte titel på vinduet og skrive en tekst ind under billedet med dette kald:
  <a href="image.html?imgSrc=mit_billede.jpg&imgTxt=En eller anden billedtekst&title=Et billede af noget">Test</a>

Så får du ikke mere for den 25 øre  ;o)
/mvh
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