3 Replies - 596 Views - Last Post: 19 July 2011 - 09:19 AM

#1 saniahabib  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 17-July 11

how to display images with long titles using javascript?

Posted 17 July 2011 - 10:20 AM

Hy all!

m tryig to display titles of more than one word of scrolling images when hover on the images. But there is a problem in my code. It shows only the first word when hover the images. e.g the images title is "My first image" then it will display only 'My' as the title. Is there any option to fix this problem using the javascript.
Is This A Good Question/Topic? 0
  • +

Replies To: how to display images with long titles using javascript?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4316
  • View blog
  • Posts: 12,096
  • Joined: 18-April 07

Re: how to display images with long titles using javascript?

Posted 17 July 2011 - 10:26 AM

It would help if you showed us the actual code so we can see what you are doing wrong. Don't you think? Post your code and we will take a look. That is our number one rule here, always show your code.

Thanks for helping us help you! :)
Was This Post Helpful? 0
  • +
  • -

#3 saniahabib  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 17-July 11

Re: how to display images with long titles using javascript?

Posted 19 July 2011 - 08:26 AM

View PostMartyr2, on 17 July 2011 - 10:26 AM, said:

It would help if you showed us the actual code so we can see what you are doing wrong. Don't you think? Post your code and we will take a look. That is our number one rule here, always show your code.

Thanks for helping us help you! :)


This is my code.issue with the Title Display in the scroll bar script. It doesn't show the text
after space but I need to show full title. Need to tweak this js script to make
it work. Look into it to fix.

If you open the file then on mouse over on images you will see title. Right now
only displaying first word as not showing text after space.



Like for the first image title is "A homing pigeon learns to cope with a
learning difficulty with the help of his teacher." But its only showing A.


<script>

var pic = new Array()

function banner(name, width, link, title){
this.name = name
this.width = width
this.link = link
this.title = title
}

pic[0] = new banner("images/bgpic_07.jpg",100,"Books_page.php#pigeon")
pic[0].title ="A homing pigeon learns to cope with a learning difficulty with the help of his teacher."

pic[1] = new banner('images/bgpic_09.jpg',100,'Books_page.php#chipperClown')
pic[1].title ="Chipper wants to be a clown more than anything, but in order to make his dream come true, he learns the importance of asking for help."

pic[2] = new banner('images/bgpic_11.jpg',100,'Books_page.php#chipperUnicycle')
pic[2].title ="Chipper finds a new act! But it is harder than he thought. Chipper learns the value of perseverance when learning something new."

pic[3] = new banner('images/bgpic_13.jpg',100,'Books_page.php#shelby')
pic[3].title ="Shelby is a kind and caring cat who will not let the mean street cats bully him into changing."

pic[4] = new banner('images/bgpic_15.jpg',100,'Books_page.php#tortoise')
pic[4].title ="Jake the tortoise wants to fit in, so he changes the way he looks. But he learns that he does not have to do that to find true friends."

pic[5] = new banner('images/bgpic_17.jpg',100,'Books_page.php#cat')
pic[5].title ="An ordinary housecat foils a burglar just by doing what he does best....being a cat."

pic[6] = new banner('images/bgpic_19.jpg',100,'Books_page.php#superhero')
pic[6].title ="Superhero always saves the day! Then he meets two foes he can not beat. But he knows he can always call on his dad for help."

pic[7] = new banner('images/bgpic_21.jpg',100,'Books_page.php#martin')
pic[7].title ="Martin loves to daydream in school. But he learns that paying attention in school is the first step to making those dreams come true."

pic[8] = new banner('images/TwitchCover-s.jpg',100,'Books_page.php#twitch')
pic[8].title ="Twitch is a daredevil…and he always lands on his feet! But he learns that his parents know best about keeping him safe."

pic[9] = new banner('images/bgpic_07.jpg',100,'Books_page.php#pigeon')
pic[9].title ="A homing pigeon learns to cope with a learning difficulty with the help of his teacher."

pic[10] = new banner('images/bgpic_09.jpg',100,'Books_page.php#chipperClown')
pic[10].title ="Chipper wants to be a clown more than anything, but in order to make his dream come true, he learns the importance of asking for help."

pic[11] = new banner('images/bgpic_11.jpg',100,'Books_page.php#chipperUnicycle')
pic[11].title ="Chipper finds a new act! But it is harder than he thought. Chipper learns the value of perseverance when learning something new."

var speed = 20
var kk = pic.length
var ii
var hhh
var nnn
var myInterval
var myPause
var mode = 0

var imgArray = new Array(kk)
var myLeft = new Array(kk)

for (ii=0;ii<kk;ii++){
imgArray[ii] = new Image()
imgArray[ii].src = pic[ii].name
imgArray[ii].width = pic[ii].width
imgArray[ii].title = pic[ii].title
hhh=0
for (nnn=0;nnn<ii;nnn++){
hhh=hhh+pic[nnn].width
}
myLeft[ii] = hhh
}

function ready(){
for (ii=0;ii<kk;ii++){
if (document.images[ii].complete == false){
return false
break
}
}
return true
}

function startScrolling(){
if (ready() == true){
window.clearInterval(myPause)
myInterval = setInterval("autoScroll()",speed)
}
}

function autoScroll(){
for (ii=0;ii<kk;ii++){
myLeft[ii] = myLeft[ii] - 1

if (myLeft[ii] == -(pic[ii].width)){
hhh = 0
for (nnn=0;nnn<kk;nnn++){
if (nnn!=ii){
hhh = hhh + pic[nnn].width
}
}
myLeft[ii] = hhh
}

document.images[ii].style.left = myLeft[ii]
}
mode = 1
}

function stop(){
if (mode == 1){
window.clearInterval(myInterval)
}
if (mode == 0){
window.clearInterval(myPause)
}
}

function go(){
if (mode == 1){
myInterval = setInterval("autoScroll()",speed)
}
if (mode == 0){
myPause = setInterval("startScrolling()",10)
}
}

/*var tt=pic.title.length
function myTitl()
{
for(ii=0; ii<tt; ii++)
{
document.images[ii].title=pic.title
}
}*/

myPause = setInterval("startScrolling()",10)

</Script>

<body bgcolor="#DDEEFE" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<script>
for (ii=0;ii<kk;ii++){
document.write('<a href = ' + pic[ii].link + ' target="_parent" title="pic[ii].title"><img space=0 hspace=0 vspace=0 border=0 height=99 style=position:absolute;top:0;left:' + myLeft[ii] + '; src=' + pic[ii].name + ' title= ' + pic[ii].title + ' onmouseover=stop() onmouseout=go()></a>')
}
</Script>

</body>
Was This Post Helpful? 0
  • +
  • -

#4 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: how to display images with long titles using javascript?

Posted 19 July 2011 - 09:19 AM

I haven't tested this, but a few errors stick out at a first glance.

First, where are your semicolons? You need to use semicolons to end single-line statements.

Second, can you please keep the caps the same? Like you start the script tag with a lowercase s, but end it with an uppercase S.

Third, can you please specify the type of script? Aka, type="text/javascript".

Finallly, you should probably make use of nodes or the innerHTML method instead of document.write().
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1