Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: <JavaScript> Text below image  (Read 6379 times)

0 Members and 1 Guest are viewing this topic.

xdream

  • Guest
<JavaScript> Text below image
« on: August 22, 2010, 05:40:50 AM »
Hi there,

I've just found this script here: http://www.computerhope.com/j18.htm
It's really useful and i was looking for this for quite a while.

Now what i want to add to this is:

Code: [Select]
style="border-width: 4px; border-style: double;"
I also want just a couple of lines of text underneath the image.


And another question: I want to add this script to the mainpage serveral times. But is it posible to edit it so 2 images won't show at the same time? Say i'll have the script 20 times with a database of 200 images.

Thanks in advance

trevorpe



    Beginner

    Thanked: 3
    • Yes
  • Computer: Specs
  • Experience: Experienced
  • OS: Linux variant
Re: <JavaScript> Text below image
« Reply #1 on: August 27, 2010, 10:43:23 AM »
Hi there,

Yes, what you are thinking of doing is possible.

I looked at the script.

Firstly, I would change the script slightly:
Code: [Select]
<script type="text/javascript"><!--

//Javascript Created by Computerhope http://www.computerhope.com
//store the quotations in arrays

currentimages="";
images = new Array();
//Where the first value in quotes it the link target, second value is image location, third value is the "alt" tag.
//EX: images[*] = ["link target goes here", "the location of the image goes here", "The text in the ALT tag goes here"];

images[0] = ["http://www.computerhope.com/index.htm", "http://www.computerhope.com/banners/banner.gif", "Visit Computer Hope"];
images[1] = ["http://www.computerhope.com/history/index.htm", "http://www.computerhope.com/banners/banner2.gif", "Computer History"];
images[2] = ["http://www.computerhope.com/index.htm", "http://www.computerhope.com/banners/banner3.gif", "Visit Computer Hope"];
images[3] = ["http://www.computerhope.com/newslet.htm", "http://www.computerhope.com/banners/banner4.gif", "Computer Hope Newsletter"];

index = Math.floor(Math.random() * images.length);
while(currentimages.indexOf("&" + index.toString())!=-1) {
index = Math.floor(Math.random() * images.length);
}
currentimages+="&" + index.toString();
document.write("<a href=\""+images[index][0] + "\"><img class=\"doubleborder\" src=\"" + images[index][1] + "\" alt=\"" + images[index][2] + "\"></a>");

//done

// --></script>

In that script I included a class on the img tags, so put the following in your <head> section (or add it to a previous stylesheet):
Code: [Select]
<style type="text/css">
img.doubleborder {
border-width: 4px;
border-style: double;
}
</style>

Do you know any javascript?
If so, I don't think pasting this script 20 times is not the most efficient way to do this.
Also, only the first script can have this line:
Code: [Select]
currentimages="";Comment it out on the rest of the scripts like so:
Code: [Select]
//currentimages="";or delete it.
Otherwise, you may get two of the same image on one page.

Every time you want to add an image, you will have to edit all 20 scripts (unless you want a specific selection of images per img tag)

If you send me the layout of your page, I could create a script to paste twenty of those images in one script, so you would only edit one script and have one array of images.

You can send me an e-mail at "t_profitt<...at...>hotmail<...dot...>com" if you would like a custom script based on your layout.
Trevor P.

BC_Programmer


    Mastermind
  • Typing is no substitute for thinking.
  • Thanked: 1140
    • Yes
    • Yes
    • BC-Programming.com
  • Certifications: List
  • Computer: Specs
  • Experience: Beginner
  • OS: Windows 11
Re: <JavaScript> Text below image
« Reply #2 on: August 29, 2010, 12:42:23 PM »
This is the one I wrote for my site, before I decided to instead make do it in PHP. It's still not "activated" since most of the stuff I am using it for only has one possible item.


Code: [Select]
<html>
<head>
<style type="text/css">
img.doubleborder {
border-width: 4px;
border-style: double;
}
</style>
<script language="javascript">


function randOrd(){
return (Math.round(Math.random())-0.5); }

function randomlinks(numdisplay)
{


imagelist=new Array();

//same as CH description- URI,Image,Alt...


imagelist[0] = ["http://www.computerhope.com/index.htm", "http://www.computerhope.com/banners/banner.gif", "Visit Computer Hope"];
imagelist[1] = ["http://www.computerhope.com/history/index.htm", "http://www.computerhope.com/banners/banner2.gif", "Computer History"];
imagelist[2] = ["http://www.computerhope.com/index.htm", "http://www.computerhope.com/banners/banner3.gif", "Visit Computer Hope"];
imagelist[3] = ["http://www.computerhope.com/newslet.htm", "http://www.computerhope.com/banners/banner4.gif", "Computer Hope Newsletter"];

for(i=0;i<10;i++)
imagelist.sort(randOrd);

//document.write(imagelist);
sbuild="";
for(p=0;p<numdisplay;p++)
{
sbuild+="<a href=\""+imagelist[p][0] + "\" class=\"doubleborder\"><img class=\"doubleborder\" src=\"" + imagelist[p][1] + "\" alt=\"" + imagelist[p][2] + "\"></a>";




}
return sbuild;
}
function showrandomlinks(paramobj,numdisplay)
{
//document.write(document.readyState);
//if(document.readyState=="loaded")
suse = randomlinks(numdisplay);
paramobj.innerHTML=suse;


}


</script>

<body onload="javascript:showrandomlinks(showelements,2)">
<div id="showelements"></div>
</body>

</html>

The basic idea here is that in the onload event, the div named "showelements" is passed to showrandomlinks. show randomlinks then calls randomlinks() which accepts a value that determines how many values to choose.

the selection itself is rather straightforward- I also define a short "randord" routine that returns a random value, and then use that function when sorting the array. I do this multiple times because otherwise the values in a larger array will remain close to their original positions.

Then, I just output the appropriate HTML for the first n values in the array. This is returned and then plopped into the divs InnerHTML where it will be visible. The CSS and class are transplanted from trevorpe's examples.




I was trying to dereference Null Pointers before it was cool.

trevorpe



    Beginner

    Thanked: 3
    • Yes
  • Computer: Specs
  • Experience: Experienced
  • OS: Linux variant
Re: <JavaScript> Text below image
« Reply #3 on: August 29, 2010, 06:16:15 PM »
The above script would actually be more effective than mine.

I had rewritten the Computer Hope script because of simplicity reasons (I'm assuming the original topic starter doesn't know Javascript and wouldn't be able to edit the script to suit his needs).  I hate using the "document.write" function; the InnerHTML property is much better in my opinion.

It's a lot easier to just place a div tag with the proper name to have it populated with images.

The above script could also be customized to fit the layout you want to achieve.
For Example, if you want a line break after every picture, you could change the sbuild line to:
Code: [Select]
sbuild+="<a href=\""+imagelist[p][0] + "\" class=\"doubleborder\"><img class=\"doubleborder\" src=\"" + imagelist[p][1] + "\" alt=\"" + imagelist[p][2] + "\"></a><br>";
(Note the line break at the end.  If using XHTML, remember to close all your tags with a foreslash)
Trevor P.