Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to add alternative text and title to image in "var"?

Status
Not open for further replies.
vanbeugen

vanbeugen

IS-IT--Management
Feb 4, 2005
62
0
0
NL
In a javascript I use the following code:

Code:
<script type="text/javascript">
<!--
var preloads=[];
var data=['image1.jpg','image2.jpg','image3.jpg'];
etc.
// -->
</script>

Now I would like to add a code for alternative text and title for each jpg-image. How should I write that?
 
Sort by date Sort by votes
I use objects, then refer to the properties of the object for the different fields.

Code: 
var imgs = new Array(), ii = 0;

imgs[ii++]={src:'image1.jpg', alt:'Alt 1 here', title:'Title 1 here'};
imgs[ii++]={src:'image2.jpg', alt:'Alt 2 here', title:'Title 2 here'};
imgs[ii++]={src:'image3.jpg', alt:'Alt 3 here', title:'Title 3 here'};
imgs[ii++]={src:'image4.jpg', alt:'Alt 4 here', title:'Title 4 here'};

Lee
 
Upvote 0 Downvote
Ok, but then I have to change my code allover. Is there no easier way? I only want to number a bunch of pictures, so that one can see the number of the picture. I hope I can change and add something to the line:

var data=['image1.jpg','image2.jpg','image3.jpg'];

Is that possible?
 
Upvote 0 Downvote
If you want to see the number of the picture, you can strip off the graphic name after "image" if all of them have similar names. That's not what you originally stated you wanted to do, though.

Lee
 
Upvote 0 Downvote
Sorry, I don't know what you mean. Do you mean:

var data=['1.jpg','2.jpg','3.jpg'];

And how can I see the number of the picture if I look at such a page?



 
Upvote 0 Downvote
Why don't you show the code you have so far for what you want so we can get a better idea what you're aiming for?

Lee
 
Upvote 0 Downvote
Ok, but then I have to change my code allover.
Click to expand...

Erm - no you don't. You would simply change any reference to this:

Code: 
data[someNum]

in your existing code to be this:

Code: 
data[someNum][!].code[/!]

and then to address the alt and title, you would use:

Code: 
data[someNum][!].alt[/!]

and

Code: 
data[someNum][!].title[/!]

respectively.

The fact you're asking for help with this means you don't know - and if you don't know, why would you assume you have to change all of your code?

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I'm sorry, I don't understand what you mean with: "You would simply change any reference to this: data[someNum]".
I just don't know what to do. My total code is below. I would like to give titles to the thumnails p1 - p20 and to the images p1 - p20, both in the first script below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Foto Galerij InspirationCompany</title>

<link href=" rel="stylesheet" type="text/css">
<link href=" rel="stylesheet" type="text/css">
<script src=" type="text/javascript"></script>
<link href=" rel="stylesheet" type="text/css">

<script type="text/javascript">

<!--

var preloads=[];


var data=['thumbnails/p1.jpg','thumbnails/p2.jpg','thumbnails/p3.jpg',
'thumbnails/p4.jpg','thumbnails/p5.jpg','thumbnails/p6.jpg',
'thumbnails/p7.jpg','thumbnails/p8.jpg','thumbnails/p9.jpg',
'thumbnails/p10.jpg','thumbnails/p11.jpg','thumbnails/p12.jpg',
'thumbnails/p13.jpg','thumbnails/p14.jpg','thumbnails/p15.jpg',
'thumbnails/p16.jpg','thumbnails/p17.jpg','thumbnails/p18.jpg',
'thumbnails/p19.jpg','thumbnails/p20.jpg'];
var url=['images/p1.jpg','images/p2.jpg','images/p3.jpg',
'images/p4.jpg',
'images/p5.jpg','images/p6.jpg','images/p7.jpg','images/p8.jpg',
'images/p9.jpg','images/p10.jpg','images/p11.jpg','images/p12.jpg',
'images/p13.jpg','images/p14.jpg','images/p15.jpg','images/p16.jpg',
'images/p17.jpg'];

var cellsPerRow=10; // Number Of cells Per Row
var spanLastCell=0; // 0 = no, 1 = yes

var obj,obj1,obj2,obj3;

function preload() {

for(i=0;i<arguments.length;i++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments;
}
}
preload('images/p1.jpg','images/p2.jpg','images/p3.jpg','images/p4.jpg');



function createTable() {
obj3=document.getElementById('clicker');
cellsPerRow=cellsPerRow;

if(cellsPerRow>window['data'].length) {
cellsPerRow=window['data'].length;
}
totalCells=window["data"].length;
totalRows=Math.ceil(totalCells/cellsPerRow);

if(spanLastCell==0) {
totalCells=Math.ceil(totalCells);
while(totalCells%cellsPerRow != 0) {
totalCells++;
window["data"][totalCells-1]=[' '];
}
}
startCount=0;
endCount=cellsPerRow;

newTable=document.createElement('table');
newTable.setAttribute('id','thumbtable');

newTBody=document.createElement('tbody');

for(i=0;i<totalRows;i++) {
newRow=document.createElement('tr');

for(j=startCount;j<endCount;j++){
newCell=document.createElement('td');

anc=document.createElement('a')
anc.setAttribute('href',url[j]);
anc.setAttribute('class','pic');
anc.setAttribute('className','pic'); //IE does not accept 'class' for some reason

newImg=document.createElement('img');
newImg.setAttribute('src',data[j]);
newImg.setAttribute('border',0);

anc.appendChild(newImg);
newCell.appendChild(anc);

spanSize=(totalRows*cellsPerRow)-totalCells;
maxCells=totalRows*cellsPerRow;
spanColumns=(maxCells-totalCells)+1;
if(j==totalCells-1) {
newCell.colSpan=spanColumns;
}
newRow.appendChild(newCell);
}
startCount+=cellsPerRow;
endCount+=cellsPerRow;
if(endCount>totalCells){
endCount-=endCount-totalCells;
}
newTBody.appendChild(newRow);
}
newTable.appendChild(newTBody);

document.getElementById('my_table').appendChild(newTable);

links=document.getElementById('my_table').getElementsByTagName('a');
for(c=0;c<links.length;c++) {
links[c].onclick=function() {
obj=document.getElementById('big_pic');
obj1=document.getElementById('img_container');
obj2=document.getElementById('close');
obj.className=';
obj.src=this.href;
obj3.className='show';
if(obj.offsetWidth>obj.offsetHeight) {
obj.className='landscape';
obj1.className=obj2.className='l_right';
}
else {
obj.className='portrait';
obj1.className=obj2.className='show s_right';
}
return false;
}
}
obj3.onclick=function() {
this.className=obj1.className='hide';
}
}
window.onload=createTable;
// -->
</script>

<style type="text/css">
#thumbtable {
border:1px solid #DCDCDC; position: relative; z-index: 112; top: 0px; left: 0px;
}
#thumbtable td{
width:58px;
height:58px;
text-align:center;
border:0 solid;
}
#thumbtable img {
display:block;
width:56px;
height:56px;
margin:1px;
border:1px solid #DCDCDC;
}
a.pic img{
filter:alpha(opacity=60);
opacity:0.7;
}
a.pic:hover img {
filter:alpha(opacity=100);
opacity:1.0;
}

#img_container {position: relative
margin:10px auto;
}

#close {
position:absolute;
text-align:right;
}
#close #clicker {
padding:3px;
border:1px solid #000;
background-color:#fff;
font-family:arial,verdan,hevetica,sans-serif;
font-size:14px;
font-weight:bold;
color:#000;
cursor:pointer;
}
.l_right{
width:310px;
height:20px;
left:3px;
top:13px;
}
.s_right{
width:230px;
height:20px;
left:3px;
top:13px;
}

.hide {
visibility:hidden;
}
.show {
visibility:visible;
}
.portrait {
width:240px;
height:320px;
border:1px double #DCDCDC;
}
.landscape {
width:320px;
height:240px;
border:1px double #DCDCDC;
}

</style>




<script type="text/javascript">
<!--
var w=235;
var h=295;
var l=screen.width-(w+15);
var features2='left='+l+',top=0,width='+w+',height='+h+',resizable=yes';

function pop(url) {
window.open(url,',features2);
}
//-->
</script>

</head>

<body>

<div id="content">

<div id="ex11" style="position: absolute; z-index: 15; top: 10px; height: 400px" >
<div style="position: relative; z-index: 20;">
<h4><a href=" target="_self" class="link7" ; onfocus="this.blur();">Wie zijn wij?</a> <img src=" width="8" height="1"> <a href=" target="_self" class="link7" ; onfocus="this.blur();">Inspiratie Trainingen</a> <img src=" width="8" height="1">
<a href=" target="_self" class="link7" ; onfocus="this.blur();">Teambuilding</a> <img src=" width="8" height="1"> <a href=" target="_self" class="link7" ; onfocus="this.blur();">Bezielings Trainingen</a> <img src=" width="8" height="1"> <a href=" target="_self" class="link7" ; onfocus="this.blur();">Denkworkshops</a> <img src=" width="8" height="1"> <a href=" target="_self" class="link7" ; onfocus="this.blur();">Games</a> <img src=" width="8" height="1">
<a href=" target="_self" class="link7" ; onfocus="this.blur();">Communicatie Trainingen</a> <img src=" width="8" height="1"> <a href=" target="_self" class="link7" ; onfocus="this.blur();">Belevings-Events</a> <img src=" width="8" height="1"> <a href=" target="_self" class="link7a" ; onfocus="this.blur();">Arrangementen</a> <img src=" width="8" height="1"> <a href=" target="_self" class="link7" ; onfocus="this.blur();">Surprise Meetings</a><img src=" width="8" height="1"> <a href="#" onclick="window.open(''resizable=yes,width=220,height=295')" class="link7" onfocus="if(this.blur)this.blur()">Contact</a><br>
</h4>
<h1><a href=" target="_self" class="link1"; onfocus="this.blur();">Foto Galerij</a></h1>
</div>

<div id="logo2" style="position: relative; z-index: 16; top: 0px;">

<div id="logozelf" style="position: relative; z-index: 15; top: -10px; ">

<div id="layertop2" style="position: relative; z-index: 15; top: 5px; ">
<h2></h2>
</div>

<div id="layertext2" style="position: relative; z-index: 15; top: 15px; height: 342px; overflow-x: none; overflow-y: auto; padding-right: 6%;">
<div class="tekst">
<br>
</div>
</div>

<div style="position: relative; z-index: 55; top: -350px; left:65px" ><h2>Essent Inspiration-game 4 oktober 2006</h2>
<div id="my_table"></div>

<div id="img_container" class="hide" style="position: relative; z-index: 56; top: -35px; left: -335px;">
<div id="close"><span id="clicker">X</span></div>
<img id="big_pic" src="" alt=""/><br><br><br><br><br><br><br><br><br>
</div>

</div>
</div>
</div>

<div id="layermenu" style="position: absolute; z-index: 15; top: 125px; left: 5px;">
<a href="essent-2006-10-4.html" target="_self" class="link5" ; onfocus="this.blur();">Essent Inspiration-game (4 oktober)</a>
<br><br><br>
<img src=" border="0" width="53%" alt="inspiratie training" title="">
</div>

<div id="overzicht2" style="position: absolute; z-index: 15; top: 325px;" >
<a href="workshops-events.html" target="_self" class="link3" onfocus="if(this.blur)this.blur()">
Overzicht trainingen en workshops</a><br>
<a href=" target="_blank" class="link4" onfocus="if(this.blur)this.blur()">Cases</a><br>
<a href=" target="_blank" class="link4" onfocus="if(this.blur)this.blur()">Download folder</a><br>
<a href="#" onclick="window.open('e-niewsbriefinschrijving.htm',',
'resizable=yes,width=440,height=295')" class="link4a" onfocus="if(this.blur)this.blur()">Aanmelden voor I-Nieuwsbrief</a><br>
<a href="#" onclick="window.open(''resizable=yes,width=220,height=295')" class="link4a" onfocus="if(this.blur)this.blur()">Contact: 020-776.47.04 of 026-750.24.50</a><br>
<a href=" onclick="pop(this.href); return false" class="link3" onfocus="if(this.blur)this.blur()">Index-zoek-functie</a><br>
</div>

</div>
</div>


<!--LADOT STATS SCRIPTCODE START-->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// Modification of this code is not allowed and will permanently disable your account!
// Account ID: L3563
// Site URL : // Copyright (C) 2003 Ladotstats.nl All Rights Reserved
function LadotStat_Pageview()
{
var d=document;
var sid="L3563";
var CONTENTSECTION="";
var CUSTOMDATA="";
var osp_URL=d.URL;
var osp_Title=d.title;
var t=new Date();
var p="http"+(document.URL.indexOf('https:')==0?'s':')+"://stats.
ladotstats.nl/stat.aspx?tagver=2&sid="+sid;
p+="&url="+escape(osp_URL);
p+="&ti="+escape(osp_Title);
p+="&section="+escape(CONTENTSECTION);
p+="&custom="+escape(CUSTOMDATA);
p+="&rf="+escape(parent==self?window.document.referrer:top.document.
referrer);
p+="&tz="+escape(t.getTimezoneOffset());
p+="&ch="+escape(t.getHours());
p+="&js=1";
p+="&ul"+escape(navigator.appName=="Netscape"?navigator.language:
navigator.userLanguage);
if(typeof(screen)=="object"){
p+="&sr="+screen.width+"x"+screen.height;p+="&cd="+screen.colorDepth;
p+="&jo="+(navigator.javaEnabled()?"Yes":"No");
}
d.write('<A HREF=" target=_blank><IMG ID="LADOTSTAT_TAG" BORDER="0" SRC="'+p+'" ></A>');
}

LadotStat_Pageview();
//-->
</SCRIPT>
<NOSCRIPT>
<A HREF=" target=_blank>
<IMG BORDER="0" SRC=" >
</A>
</NOSCRIPT>
<!--LADOT STATS SCRIPTCODE END-->

</body>
</html>
 
Upvote 0 Downvote
Apologies - I had a typo in that post. When I said to change any reference of:

Code: 
data[someNum]

to

Code: 
data[someNum][!].code[/!]

I should have said to change to:

Code: 
data[someNum][!].src[/!]

In your case, "someNum" is "j", so you would change

Code: 
newImg.setAttribute('src', data[j]);

to be

Code: 
newImg.setAttribute('src', data[j][!].src[/!]);

(this assumes you go with Lee's excellent suggestion, of course)

to add the alt and title attributes, you would add these lines after the one mentioned above:

Code: 
newImg.setAttribute('[!]alt[/!]', data[j][!].alt[/!]);
newImg.setAttribute('[!]title[/!]', data[j][!].title[/!]);

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Dan,

Sorry, was some days at a place where I could not have any internet. I Tried to understand what you'r saying but cannot really underderstand what you mean. I made the following html and changed the code as I understand it, but it's wrong because it doesn't work. What do I do wrong?


This is the page as it is working now correctly but without any title:

 
Upvote 0 Downvote
Re-read my post:

this assumes you go with Lee's excellent suggestion, of course
Click to expand...

You have to have implemeted Lee's solution (the first reply) for this to have worked.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
181
xwb
xwb
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
172
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
152
lexer
lexer
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
133
Rayj0000
Rayj0000
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
68
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top