Avatar billede craver35 Nybegynder
07. april 2012 - 17:29 Der er 24 kommentarer og
1 løsning

Hjælp til at tilføje link til billede og tekst + hjælp til at få teksten til at være til højre for billedet.

Hej Eksperter.

Jeg har dette script, som jeg fandt på nettet som automatisk viser nogle billede og noget tekst.. Men mit problem er at jeg gerne vil have at når man klikker på billedet eller teksten, så skal det linke til en side + teksten skal være til højre for billedet lige overfor billedet, som på http://www.youtube.com/watch?v=7i8gzfoqqIg&feature=g-all-u&context=G2e91acdFAAAAAAAABAA under forslag.

Håber der er nogle der kan hjælpe?


-----------------------KODE----------------------


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
    #images_container{
        overflow:hidden;
        width:150px;
    }
    #images_container .image_box{
        float:left;
        width:150px;
        text-align:center;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ (...)
<script type="text/javascript">

var image_list = [
    {
        url:        'http://i1.ytimg.com/ (...),
        caption:    'This is a random image 1'
    }
    ,{
        url:        'http://i3.ytimg.com/ (...),
        caption:    'This is a random image 2'
    }
    ,{
        url:        'http://i3.ytimg.com/ (...),
        caption:    'This is a random image 3'
    }
    ,{
        url:        'http://i3.ytimg.com/ (...),
        caption:    'This is a random image 4'
    }
    ,{
        url:        'http://i4.ytimg.com/ (...),
        caption:    'This is a random image 5'
    }
    ,{
        url:        'http://i3.ytimg.com/ (...),
        caption:    'This is a test'
    }
    ,{
        url:        'http://i1.ytimg.com/ (...),
        caption:    'This is a test'
    }
    ,{
        url:        'http://i2.ytimg.com/ (...),
        caption:    'This is a test'
    }
]

$(function(){
    var used = [];
    var i = Math.floor(Math.random() * image_list.length);
    while (used.length < 4){
        while ($.inArray(i, used) > -1){
            i = Math.floor(Math.random() * image_list.length);
        }
        img = image_list[i];
        $('<div class="image_box"><img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></div>').appendTo('#images_container');
        used[used.length] = i;
    }
});

</script>

</head>

<body>
   
    <div id="images_container"></div>
   
</body>
</html>



------------------------KODE------------------------

Mvh. Jeppe S
Avatar billede olebole Juniormester
07. april 2012 - 17:42 #1
<ole>

Til en start er det en misforståelse at bruge float, når man gerne vil lægge block elementer ved siden af hinanden. Det er, hvad display:inline-block er skabt til. Floating er beregnet til f.eks. at lave tekstomløb omkring et billede eller tekstblok. Bruger man det til andet, medfører det unødigt bøvl med det faktum, at elementerne er flået ud af sidens naturlige flow.

Hvad angår linket, kan du vel bare skrive det ind i strengen her:

'<div class="image_box"><img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></div>'

- eller har jeg misforstået problemet?

/mvh
</bole>
Avatar billede olsensweb.dk Ekspert
07. april 2012 - 17:55 #2
sæt et tag ind i dit array, kald den feks link
{
        url:        'http://i1.ytimg.com/',
        caption:    'This is a random image 1',[/b]
        link:        'http://olsensweb.dk'
}

du kunne omklammer hele bille og teksten med en "a href" til at starte med
$('<div class="image_box">[b]<a href="' + img.link + '"> <img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></a></div>').appendTo('#images_container');
Avatar billede olsensweb.dk Ekspert
07. april 2012 - 18:00 #3
nogle gange skal man passe på med at sette de BB tags i hånden :)
sådan skulle det se ud
sæt et tag ind i dit array, kald den feks link
{
        url:        'http://i1.ytimg.com/',
        caption:    'This is a random image 1',
        link:        'http://olsensweb.dk'[/b]
}

du kunne omklammer hele bille og teksten med en "a href" til at starte med
$('<div class="image_box"><a href="' + img.link + '"> <img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></a></div>').appendTo('#images_container');
Avatar billede olsensweb.dk Ekspert
07. april 2012 - 18:05 #4
ja så løkkes det igen E at smadre BB tags, nu er alt med bold igen :(
'  [/b] uden mellemrum mellem får E til at gå amok og mistolke et tag
Avatar billede olebole Juniormester
07. april 2012 - 18:05 #5
<ole>

Et bud på en HTML-kode, som overholder regler for, hvad der må/kan indeholde hvad:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
#images_container{
    width: 250px;
    border-left: 1px solid blue;
    border-right: 1px solid blue;
}
#images_container .image_box{
    width: 250px;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}
.image_box span {
    width: 120px;
    padding-left: 10px;
    display: inline-block;
    vertical-align: top;
}
.image_box img {
    width: 120px;
    display: inline-block;
    vertical-align: top;
    border: 0;
}
</style>
</head>
<body>

<div id="images_container">
    <div class="image_box"><a href="#"><img src="http://i1.ytimg.com/" alt="This is a random image 1"><span>This is a random image 1</span></a></div>
    <div class="image_box"><a href="#"><img src="http://i3.ytimg.com/" alt="This is a random image 2"><span>This is a random image 2</span></a></div>
    <div class="image_box"><a href="#"><img src="http://i4.ytimg.com/" alt="This is a random image 3"><span>This is a random image 3</span></a></div>
</div>

</body>
</html>

Så burde det være ret ligetil at skrive strengen i dit jQuery kald

/mvh
</bole>
Avatar billede olsensweb.dk Ekspert
07. april 2012 - 18:21 #6
hurtig test, uden brug af CSS
http://experten.olsensweb.dk/960806/
Avatar billede craver35 Nybegynder
07. april 2012 - 19:20 #7
Hej Ronols.

Mange tak for din hjælp, jeg kan ikke bare ikke få det tilpasset på min side kode, som ser ud som følgende:

----------------KODE---------------------


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

/*TITLE*/            $title="Se mand græde mælk!";
/*DESCRIPTION*/        $desc="Se mand græde mælk!";
/*IMAGE*/            $image="http://i.imgur.com/peNCv.jpg";
/*AMUNG CODE*/        $amung="";
/*WEBSITE*/            $website="http://is.gd/cJRNYv";
/*VIDEO*/            $video="video_1_se.php";
/*ADMIN*/            $admin="";

?>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/center.css" />
    <style>
   
        #images_container{
        overflow:hidden;
        width:300px;
    }
    #images_container .image_box{
        float:center;
        width:300px;
        text-align:center;
    }
        body { background-color: #f9f9f9; font: normal 12px/12px arial, helvetica, sans-serif; }
        #container {
    width: 1050px;
    margin: auto;
}
        #header {color: #777; text-align: center; background-color: #ddd;  padding: 25px; border: 1px #bbb solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(ie/PIE.htc);}
        #header h1 { color: #333; text: bold 18px/18px arial; margin: 0 0 15px 0;}
    a:link {
    color: #000;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: none;
    color: #666;
}
a:active {
    text-decoration: none;
    color: #000;
}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

var image_list = [
    {
        url:        'http://i1.ytimg.com/vi/4wt824D1Bqg/default.jpg',
        caption:    'This is a random æsel 1'
    }
    ,{
        url:        'http://i3.ytimg.com/vi/VVI7Z8kOyvA/default.jpg',
        caption:    'This is a random æsel 2'
    }
    ,{
        url:        'http://i3.ytimg.com/vi/zWHd4u0mBWs/default.jpg',
        caption:    'This is a random æsel 3'
    }
    ,{
        url:        'http://i3.ytimg.com/vi/J-Psu-x-KSA/default.jpg',
        caption:    'This is a random æsel 4'
    }
    ,{
        url:        'http://i4.ytimg.com/vi/c4ys61-A-eo/default.jpg',
        caption:    'This is a random æsel 5'
    }
    ,{
        url:        'http://i3.ytimg.com/vi/VfVYVYl8Fq8/default.jpg',
        caption:    'This is a test'
    }
    ,{
        url:        'http://i1.ytimg.com/vi/DjoNt2viUz0/default.jpg',
        caption:    'This is a test'
    }
    ,{
        url:        'http://i2.ytimg.com/vi/anlZc0T8rfo/default.jpg',
        caption:    'This is a test'
    }
]

$(function(){
    var used = [];
    var i = Math.floor(Math.random() * image_list.length);
    while (used.length < 4){
        while ($.inArray(i, used) > -1){
            i = Math.floor(Math.random() * image_list.length);
        }
        img = image_list[i];
        $('<div class="image_box"><img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></div>').appendTo('#images_container');
        used[used.length] = i;
    }
});

</script>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/da_DK/all.js#xfbml=1&appId=183731528408925";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="container">
  <div id="header">
    <h1><img src="images/logo_02.gif" alt="" width="397" height="100" longdesc="http://www.damnfun.dk/index.html"></h1>
  </div>
  <table width="1050" height="87" border="0">
    <tr>
      <th width="1050" height="68" background="images/menubar_02.gif" scope="row"><div align="left" class="menubar_1">&nbsp; <a href="index.html">Hjem</a> | <a href="videoer.html">Videoer</a> | <a href="kontakt.html">Kontakt</a></div></th>
    </tr>
  </table>
</div>
<div style="margin:10px auto; width:1050px; text-align: center; font-size: 12px;">
  <table width="300" border="0" align="right">
  </table>
  <table width="720" height="461" border="0" align="left" bgcolor="#eeecec">
    <tr>
      <th height="457" scope="row"><table width="720" border="0">
        <center>
          <tr>
            <th height="71" class="kommenter_tekst" style="text-align: center; background-image: url(images/kommentar_03.gif);" scope="row"><?php echo $title;?></th>
          </tr>
        </center>
      </table>
        <p>
          <object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/BNteWgUFXXM&rel=0&hl=da_DK&feature=player_embedded&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/BNteWgUFXXM&rel=0&hl=da_DK&feature=player_embedded&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed></object>
      </p>
        <table width="720" border="0">
          <tr>
            <th scope="row">Synes du videoen var god så smid en kommentar nedenfor</th>
          </tr>
      </table></th>
    </tr>
  </table>
  <table width="300" height="512" border="0" align="right" bgcolor="#eeecec">
    <tr>
      <th height="508" scope="row"><table width="300" border="0" bgcolor="#eeecec">
        <tr>
          <td height="67" class="flere_videoer" style="text-align: center"><p>Flere Videoer</p></td>
        </tr>
        <tr>
          <th height="433" style="text-align: left" scope="row"><p>&nbsp;</p>            <div id="images_container"></div></th>
        </tr>
      </table></th>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <table width="720" border="0" bgcolor="#eeecec">
    <tr>
    <th width="600" height="153" scope="row"><table width="720" height="76" border="0">
      <tr>
        <th width="450" height="46" class="kommenter_tekst" style="text-align: center; background-image: url(images/kommentar_03.gif);" scope="row">Skriv en kommentar nedenunder</th>
      </tr>
    </table>
      <table width="720" border="0">
        <tr>
          <th scope="row"><div class="fb-comments" data-href="<?php echo $website;?>" data-num-posts="6" canpost="true" data-width="640"></div></th>
        </tr>
      </table>
      <p>&nbsp;</p></th>
  </tr>
</table>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="1007" border="0" align="center">
  <tr>
    <td width="997" height="89" background="images/menubar_03.gif"><div align="left" class="menubar_1">
      <div align="center">&nbsp;Copyright by damnfun.dk</div>
    </div></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

<script type="text/javascript">
//interstitial ad
clicksor_enable_inter = true; clicksor_maxad = -1;   
clicksor_hourcap = 1; clicksor_showcap = 2;
//default banner house ad url
clicksor_default_url = '';
clicksor_banner_border = ''; clicksor_banner_ad_bg = '';
clicksor_banner_link_color = ''; clicksor_banner_text_color = '';
clicksor_layer_border_color = '';
clicksor_layer_ad_bg = ''; clicksor_layer_ad_link_color = '';
clicksor_layer_ad_text_color = ''; clicksor_text_link_bg = '';
clicksor_text_link_color = ''; clicksor_enable_text_link = false;
</script>
<script type="text/javascript" src="http://ads.clicksor.com/newServing/showAd.php?nid=1&amp;pid=240853&amp;adtype=&amp;sid=387622"></script>
<noscript><a href="http://www.yesadvertising.com">affiliate marketing</a></noscript>





----------------------KODE--------------------------


Håber du kan hjælpe mig det ville være rigtigt dejligt!

mvh. Jeppe S
Avatar billede craver35 Nybegynder
07. april 2012 - 19:25 #8
Det skal lige siges jeg har slet ingen forstand på javascript!

mvh. Jeppe S
Avatar billede craver35 Nybegynder
07. april 2012 - 20:46 #9
Har fået det til at virke nu, men nu er mit spørgsmål bare hvordan får jeg teksten til at følge med billedet så det ikke ryger ind under billedet. I kan se hvordan det ser ud her

http://damnfun.dk/video_1_se.php


mvh. Jeppe S
Avatar billede craver35 Nybegynder
07. april 2012 - 21:06 #10
Hvordan tilføjer jeg mellemrum imellem videoerne?
Jeg synes nemlig de ligger lidt for tæt.

mvh. Jeppe S
Avatar billede olsensweb.dk Ekspert
07. april 2012 - 22:04 #11
jeg tror jeg ville opdele <div class="image_box"> i 2 span

og denne css

#images_container .image_box{
        padding-bottom: 15px;
}
.img_sp{
        width: 120px;   
}
.txt_sp{
    width: 50px;
    padding-left: 10px;
    display: inline-block;
}
[div]

[div][pre]$('<div class="image_box"><span class="img_sp"><a href="' + img.link + '"><img src="' + img.url + '" alt="' + img.caption + '"></a></span> <span class="txt_sp"><a href="' + img.link + '">' + img.caption + '</a></span></div>').appendTo('#images_container');[pre]


demo lavet ud fra min code i #6 http://experten.olsensweb.dk/960806/index_v1.html
Avatar billede olsensweb.dk Ekspert
07. april 2012 - 22:07 #12
jeg er ikke gode venner med de BB tags idag
sådan!!

jeg tror jeg ville opdele <div class="image_box"> i 2 span

og denne css

#images_container .image_box{
        padding-bottom: 15px;
}
.img_sp{
        width: 120px;   
}
.txt_sp{
    width: 50px;
    padding-left: 10px;
    display: inline-block;
}


$('<div class="image_box"><span class="img_sp"><a href="' + img.link + '"><img src="' + img.url + '" alt="' + img.caption + '"></a></span> <span class="txt_sp"><a href="' + img.link + '">' + img.caption + '</a></span></div>').appendTo('#images_container');


demo lavet ud fra min code i #6 http://experten.olsensweb.dk/960806/index_v1.html
Avatar billede olebole Juniormester
07. april 2012 - 22:19 #13
Jeg tror, eksemplet i #5 gør præcis, hvad der ønskes.

I øvrigt er det en rigtig skidt idé at bruge tomme P elementer:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

- til at skabe luft mellem andre elementer. W3C fraråder udviklere fremgangsmåden og tilråder browserudviklere at ignorere tomme P tags. At browserne så ikke ignorerer dem - men nøjes med at tolke dem forskelligt - er en anden sag. Du bør i stedet bruge CSS
Avatar billede craver35 Nybegynder
07. april 2012 - 23:43 #14
Det hele ville være perfekt hvis jeg nu kunne få teksten til at stå ved siden af billedet i toppen af billedet.

I har godt nok hjulpet mig meget, mange tak jeg vil værdsætte hvis i lige ville hjælpe mig med det sidste, så kan i sende svar.

mvh. Jeppe S
Avatar billede olsensweb.dk Ekspert
08. april 2012 - 01:01 #15
prøv at sette position: fixed; i den span teksten visses i

.txt_sp{
    position: fixed;
    width: 50px;
    padding-left: 10px;
    display: inline-block;
}


jeg har opdateret link i #12

også bør du nok kigge alvorligt http://validator.w3.org/ og CSS
hvad laver coden efter </body> det er bestemt ikke lovligt, du bruger en masse forældet code, hvor du burde bruge CSS, samt forældet tags <center> har været forældet i mange år
Avatar billede olsensweb.dk Ekspert
08. april 2012 - 01:28 #16
prøvede lige i Firebug du skal bruge position: absolute;

.txt_sp{
    position: absolute;   
    width: 50px;
    padding-left: 10px;
    display: inline-block;
}
Avatar billede craver35 Nybegynder
08. april 2012 - 10:18 #17
Hej Ronols, hvad skal jeg ændre for at min kode, bliver lovlig igen? Jeg er nemlig ikke særlig god til at programmere, som du sikkert ved :)

PS. STOR TAK FOR HJÆLPEN!


Mvh. Jeppe S
Avatar billede olsensweb.dk Ekspert
08. april 2012 - 11:04 #18
>hvad skal jeg ændre for at min kode, bliver lovlig igen?
ikke så lidt ??
kig her samt css her

iøvrigt er man gået bort fra tabeller til design for merer end 10 år siden
nb: dit desigt skrider i højre side når et eller flere billeder af forslået videoer er størrer end de 120px * 90 px, de andre billeder er
Avatar billede olebole Juniormester
08. april 2012 - 16:35 #19
"Det hele ville være perfekt hvis jeg nu kunne få teksten til at stå ved siden af billedet i toppen af billedet." >> Igen som i eksemplet i indlæg #5  *o)
Avatar billede craver35 Nybegynder
08. april 2012 - 22:47 #20
Ronols, jeg kan godt se der er meget der skal ændres, jeg tænker lidt på at gøre det, jeg vidste ikke man var gået fra tabel design for 10 år siden ;)

- Jeg har kigget lidt inde på det første link du sendte mig, skal jeg kopiere den kode der står allernederst og sætte ind i min center.css istedet for det jeg har derinde? :)

mvh. Jeppe S
Avatar billede craver35 Nybegynder
08. april 2012 - 22:49 #21
Undskyld jeg mente det andet link altså CSS linket.

Mvh. Jeppe S
Avatar billede olsensweb.dk Ekspert
08. april 2012 - 23:09 #22
Jeg har kigget lidt inde på det første link du sendte mig, skal jeg kopiere den kode der står allernederst og sætte ind i min center.css istedet for det jeg har derinde?
nej du skal rette alle de fejl den angiver, det er ikke en rettet udgave, den laver, den gør kun opmærksom på hvilke linjer der er fejl i, og hvilke fejl.
Avatar billede craver35 Nybegynder
11. april 2012 - 11:41 #23
Jeg orker ikke at rette alle fejlene, da jeg ikke er så erfaren angående programmering.

Ps. Send svar og mange tak for hjælpen! :D

Mvh. Jeppe S
Avatar billede olsensweb.dk Ekspert
11. april 2012 - 12:19 #24
du får et svar her.

>Jeg orker ikke at rette alle fejlene,
hvis du har fejl i din HTML eller CSS, kan du ikke 100% stole på det design du ser på din skærm, andre browserer kan tolke fejlene anderledes, eller ignorer fejlene helt, med de værdier de indeholder

dine validerings fejl i JS kan du løse ved at pakke det ind i cdata
google js cdata
http://www.w3.org/TR/html4/interact/scripts.html
http://www.w3.org/TR/xhtml1/diffs.html
http://javascript.about.com/library/blxhtml.htm

en anden og bedre løsning er at lægge dine js i externe filer, hvor det er muligt


>da jeg ikke er så erfaren angående programmering.
du bliver kun bedre ved at øve dig
Avatar billede olebole Juniormester
11. april 2012 - 15:27 #25
ronols >> Hvad skulle CDATA kunne gøre for en HTML4.01 kode? Det hjælper heller på validiteten ikke at lægge JS i eksterne filer.

@craver35: Hvis du vil skrive HTML, er du nødt til at lære de mest grundlæggende ting om emnet - såsom at skrive en valid kode.

At skrive valid kode er det allerletteste ved webkodning. Det er bare at gøre, som der står i manualen  *o)
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