Hej!
Undrar om någon vet hur man får till slumpvisa bilder+länk. Alltså, varje gång man besöker sidan ska det vara nya bilder som visas, med länkar till mer info om just den bilden. Länkarna är alltså olika för varje bild. Har googlat och hittat lite om att man kan få till slumpvisa bilder i javascript, men hittar inte mycket som passar i mitt fall med tillhörande länkar.
Någon som vet? :)
Skapa bara en array med objekt likt:
var images = [
{src: 'bilden_url', text: 'text om bilden'},
{src: 'bilden_url2', text: 'text om bilden2'}/* ,
osv ...*/
];
och hämta ut ett random index av arrayns längd och presentera datan av den:
var images = [
{src: 'bilden_url', text: 'text om bilden'},
{src: 'bilden_url2', text: 'text om bilden2'}/* ,
osv ...*/
],
index = Math.floor(Math.random() * images.length),
image = images[index];
så använder du js objektet image som image.src och image.text för att få ut bildkällan och texten (du kan bygga ut objekten till vad du vill, href skulle du också kunna lägga in om du vill).
Jag hittade denna kod på nätet:
function random_imglink(){ var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="images1.jpg"
myimages[2]="images2.jpg"
myimages[3]="images3.jpg"
myimages[4]="images4.jpg"
myimages[5]="images5.jpg"
myimages[6]="images6.jpg"
myimages[7]="images7.jpg"
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="1.html"
imagelinks[2]="2.html"
imagelinks[3]="3.html"
imagelinks[4]="4.html"
imagelinks[5]="5.html"
imagelinks[6]="6.html"
imagelinks[7]="7.html"
var ry=Math.floor(Math.random()*myimages.length) if (ry==0) ry=1 document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>') } random_imglink()
Tyckte den funkade ganska bra. Jag är inte jättehemma på javascript själv, så förstod inte riktigt svaret. Bättre på html... Kan man använda några alt-texter i javascript? Och det verkar som att det blir random bild med random länk, men jag vill att bild1 och länk1 alltid ska hänga ihop.
jag hade inte använt det, du skapar två arrayer som inte har något med varandra att göra egentligen, den kommer crashar om du ha 8 bilder (array börjar på 0 för övrigt)
det du behövde göra med min kod var att rendera ut din bild:
document.write('<a href='+'"'+image.href+'"'+'><img src="'+image.src+'" alt="' + image .text + '"></a>')
om vi bygger ut för href också:
var images = [
{src: 'bilden_url', text: 'text om bilden'[b], href: 'http://webforum.nu'[/b]},
{src: 'bilden_url2', text: 'text om bilden2'[b], href: 'http://google.se'[/b]}/* ,
osv ...*/
];
och javascript kan skapa html-element så allt du kan göra med html kan du lägga in och påverka DOM:en
Tack för hjälpen! Fick det att funka såhär:
<script type="text/javascript">
var images = [
{src: '/slumpvisa/XXX.jpg', text: 'sko', href: 'http://sko.se'},
{src: '/slumpvisa/XXX2.jpg', text: 'ljusstake', href: 'http://ljusstake.se'},
{src: '/slumpvisa/XXX3.jpg', text: 'gubbe', href: 'http://gubbe.se'}
];
index = Math.floor(Math.random() *3),
image = images[index];
document.write('<a href='+'"'+image.href+'"'+'><img src="'+image.src+'" title="' + image.text + '"></a>')
</script>
Tjoho!! :e
Varför funkar det inte.....
Hur gör man för att utseendet på det som kommer från javascripet med css? Testade enligt koden nedan, men får det inte att fungera. Eller snarare... Det fungerar, fast ingen bild syns. Vad kan vara felet?
.img {
width:164px;
height:150px;
text-align:center;
background-color:#0C9;
float:left;
}
<script type="text/javascript">var images = [
{src: 'bild1.jpg', text: 'klanning', href: 'http://klanning.se', href2: 'http:blfböf', quotation: 'texttext...'},
{src: 'bild2.jpg', text: 'ljusstake', href: 'http://ljusstake.se', quotation: 'texttext'},
{src: 'bild3.jpg', text: 'gubbe', href: 'http://gubbe.se', quotation: 'texttext'}
];
index = Math.floor(Math.random() *3),
image = images[index];
document.write('<div class="img"><a href='+'"'+image.href+'"'+'><img src="'+image.src+'" border="0" title="' + image.text + '"></a><br><a href='+image.href2+'>'+ image.quotation +'</a><br><a href='+image.href+'>Se föremålen<br /><br /></a>')
</script>
Du stänger ju aldrig diven i din sträng