Solved

How do I href rotating images from database using ASP and Javascript?

Posted on 2007-03-27
14
461 Views
Last Modified: 2008-02-01
Hi I have managed to extract images and their IDs from my database and to rotate the images using javascript. The problem is my customers need to be able to click on an image they like and be taken to a details page with more information. I have had a go at the coding but get
http://localhost/silver/details.asp?undefined
when I click the images.

The javascript is below:

<script language="javascript">
var peekaboo = new Array() ;
var peekID = new Array () ;
var theImages = new Array("<% = ASPoutput %>");
var theIDs = new Array ("<%=IDoutput%>");  
var peekwhich = 0;
var peekwhich1 = 0;
var speed = 5000; // millliseconds

if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
}
}
 {
   for (i=0;i<theIDs.length;i++) {
      peekID[i] = new window.parent.location.href();
      peekID[i].window.parent.location.href = theIDs[i];
        }
        }

function rotate()  {
   document.images["pic"].src = peekaboo[peekwhich++].src;
   // status = peekwhich + ':' + document.images["pic"].src
   if (peekwhich>=peekaboo.length) peekwhich=0;  
   setTimeout("rotate()",speed)
}
function rotateLinks() {
         window.parent.location.href = "details.asp?" + peekID[peekwhich++];
         if (peekwhich1>=peekID.length) peekwhich1=0;
         setTimeout("rotateLinks()", speed)
         }
 </script>  

In the html I have:
<body onload="if (document.images) rotate()">
<a href="javascript:rotateLinks()"><img name="pic"></img></a>
<span id = SpoonID></span>
</body>
</html>
0
Comment
Question by:morphy0186
  • 7
  • 5
  • 2
14 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Are the details put with the image names and ids on the html page or are you hoping to get them dynamically from the server?  If the former, we need to see what the html source is like for that page.  If the later, you need to use an effect called AJAX.

One of the best explanations and simplest examples I have found on the net is at http://www.skeymedia.com/programming/classic-asp-and-ajax-tutorial/.  There is also a good explanation on what AJAX is at http://en.wikipedia.org/wiki/Ajax_%28programming%29.  The reference site W3Schools has a good section on AJAX at http://www.w3schools.com/ajax/default.asp.

Let me know if you have a question using that effect in your page.  To be specific I would need your code but the javascript is the key.  It shows using the xmlhttp object.  With the AJAX method you would have the server send the details you want to add and then insert that block in a div tag or some other element.

Let me know how this helps or what additional info you need.

bol
0
 

Author Comment

by:morphy0186
Comment Utility
Hi thanks for you help bol.

I am using an asp recordset to retrieve the images from the database and put them into the javascript array and it seems to be working ok. The asp is below.

<%
Dim Christening__MMColParam
Christening__MMColParam = "christening"
If (Request("MM_EmptyValue") <> "") Then
  Christening__MMColParam = Request("MM_EmptyValue")
End If
%>
<%
Dim Christening
set Christening = Server.CreateObject("ADODB.Recordset")
Christening.ActiveConnection = MM_connSpoonsArchive_tblspoons_STRING
Christening.Source = "SELECT *  FROM tblSpoons WHERE Size LIKE '%" + Replace(Christening__MMColParam, "'", "''") + "%' AND Status  NOT LIKE  'Sold'"
Christening.Open()
%>
<% Dim IDoutput
Dim ASPoutput
%>
<% If (Christening.EOF or Christening.BOF) then
ASPoutput = "thumbs/OutofStock.GIF"
End if
%>
<%
Do While NOT Christening.EOF
ASPoutput = ASPoutput & Christening.Fields.Item("Thumbnail").Value & ""","""
IDoutput = IDoutput & Christening.Fields.Item("SpoonID").Value & ""","""
Christening.MoveNext
loop
%>
<% If Len(ASPoutput) > 0 AND NOT Christening.BOF then
ASPoutput = Left(ASPoutput,Len(ASPoutput)-3)
If Len(IDoutput) > 0 AND NOT Christening.BOF then
IDoutput = Left(IDoutput,Len(IDoutput)-3)
End if
End if %>
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
I may have misunderstood what you wanted to do.  Instead of showing the details on the same page you have a details page that is a link.  That link is the problem.  Is that correct?

If so, let me see the html source for the page.  In other words in your browser click View and choose the option to View Source.  That will show the html the browser gets and may explain why the undefined appears.  That is the code that will be most helpful, especially the parts for the script and the image link.

Let me know if you have a question about this.

bol
0
 
LVL 6

Expert Comment

by:sankar_ravi
Comment Utility
Hi,

Simple solution could be using adrotation component.
i.e., server.createObject("MSWC.ADRotator")
As you know this component works in a way that on every visit to the page, image rotates. But on click of this you can write a simple redirection page and user can be taken to the correct url.

Thanks.
0
 

Author Comment

by:morphy0186
Comment Utility
Hi thanks for your suggestions.

I have looked at the AdRotator component and I couldn't work out how to get it to do what I need i.e. I need to rotate the images every few seconds rather than on each visit to the page.

Bol you are right the link is the problem. When the customer clicks on the current image they need to get redirected to http://localhost/silver/details.asp?SpoonID = 000 (where the 000 would be the ID of the spoon currently showing). My problem is the redirection comes up http://localhost/silver/details.asp?undefined.

The HTML is below:
<html>
<head>
<script language="javascript">
var peekaboo = new Array() ;
var peekID = new Array () ;
var theImages = new Array("thumbs/0169_1.GIF", thumbs/0104_1.GIF", "thumbs/0061_1.GIF")
var theIDs = new Array ("169", "104", "061")
var peekwhich = 0;
var peekwhich1 = 0;
var speed = 5000; // millliseconds

if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
}
}
 {
   for (i=0;i<theIDs.length;i++) {
      peekID[i] = new window.parent.location.href();
      peekID[i].window.parent.location.href = theIDs[i];
        }
        }

function rotate()  {
   document.images["pic"].src = peekaboo[peekwhich++].src;
   // status = peekwhich + ':' + document.images["pic"].src
   if (peekwhich>=peekaboo.length) peekwhich=0;  
   setTimeout("rotate()",speed)
}
function rotateLinks() {
         window.parent.location.href = "details.asp?" + peekID[peekwhich++];
         if (peekwhich1>=peekID.length) peekwhich1=0;
         setTimeout("rotateLinks()", speed)
         }
 </script>  
</head>
<body onload="if (document.images) rotate()">
<a href="javascript:rotateLinks()"><img name="pic"></img></a>
<span id = SpoonID></span>
</body>
</html>
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Thanks for the code and information.

You were missing a double quote in the line below.  It was the opening quote in the second item.

var theImages = new Array("thumbs/0169_1.GIF", "thumbs/0104_1.GIF", "thumbs/0061_1.GIF")

Also, there were some unexplained brackets in the script.  I assumed you were missing "else" and so I added it.  See the code below.

I may regret this later when it is "so obvious" but I am not sure what you are trying to do in that block below.  The If part makes sense but the else doesn't and it uses a different array (which makes me think maybe it shouldn't be an else but that goes back to the brackets).  Please clarify.

if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
      }
} else  {  // why is this here ??? bol, assume else
   for (i=0;i<theIDs.length;i++) {  // what is this for, why peekaboo & peekID
      peekID[i] = new window.parent.location.href();
      peekID[i].window.parent.location.href = theIDs[i];
        }
}  // this was extra too, go with else ??? bol

The problem may have just been the missing double quote I mentioned first.  Let me know how that works or if you have any questions.  If there is still a problem then the block I asked about next may be the cause but I am just not getting the purpose of that part of the script.

bol
0
 

Author Comment

by:morphy0186
Comment Utility
Hi, thanks for your help. Unfortunately the missing quote is not the problem just a typo. The array is picking up the recordset from ASP correctly.

To clarify the code:
if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
      }

This bit of code works out the length of the array called from the database, and creates a new array to hold the current image.

} else  {  // why is this here ??? bol, assume else
   for (i=0;i<theIDs.length;i++) {  // what is this for, why peekaboo & peekID
      peekID[i] = new window.parent.location.href();
      peekID[i].window.parent.location.href = theIDs[i];
        }
}  // this was extra too, go with else ??? bol

This bit of script is my attempt to repeat the code for the images for the IDs. I have been working on it and I think I am getting there. The new section is

if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
}
}
{
   for (y=0;y<theIDs.length;y++) {
      peekID[y] = new String();
      peekID[y] = theIDs[y];
        }
        }

function rotate()  {
   document.images["pic"].src = peekaboo[peekwhich++].src;
   // status = peekwhich + ':' + document.images["pic"].src
   if (peekwhich>=peekaboo.length) peekwhich=0;  
}
 {
        display("banner"), peekID[y];
             peekwhich1++;
         if (peekwhich1>=peekID.length) peekwhich1=0;
         setTimeout("rotate()", speed)
         }
function display(id, str) {
    with (document[id].document) {
      open();
      write(str);
      close();
    }
  }
 </script>  
</head>
<body onload="rotate()">
<A HREF=""><img name="pic"></img></a></body>
<span id="banner"></span>

I figure if I can just get the IDs to rotate and be displayed on the page then I am much closer to passing the current ID to another page.

This is getting really annoying now, and I have eaten far too many pringles...damn.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
>> and I have eaten far too many pringles...damn. <<
LOL.  Those things are addicting. :)  At least your keyboard isn't greasy (shameless product ad :D)!

Thanks for the explanation and sorry it wasn't as easy as a missing quote. :)  I will need to review your comment still but I noticed one thing that I want to comment on quickly.

You removed the else I added but still seem to have extra brackets.  What is the logic for that section of code?  In other words, should both For loops be in the If?  For example (in pseudo code) ...

If document.images then
   for <first one>
      do 2 steps to hold image and then end for
   for <second one>
      do 2 steps to hold id and then end for
End if

Since the problem has to do with the ID array the brackets may be causing the flow (or logic) to be wrong.  If you wish to test to see if both For loops are done then place an alert() in each (first line) with a custom message.  If you don't get the message in the second loop then the script isn't trying to make the peekID[] array.

Thanks for clearing this up.  I will look at the explanation and code again to see if I see something else but the issue above seems to be a potential problem.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Assuming my "pseudo code" explanation is right then that part of the script should be ...

if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
    }
   for (i=0;i<theIDs.length;i++) {
      peekID[i] = new window.parent.location.href();
      peekID[i].window.parent.location.href = theIDs[i];
    }
}

0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 250 total points
Comment Utility
Is the code in your last comment after "The new section is" complete?  It seems to be incomplete.  

>> This bit of script is my attempt to repeat the code for the images for the IDs. I have been working on it and I think I am getting there. <<

Can you elaborate?  What is the specific info the array should be giving to the line for the link (i.e. details.asp?" + peekID[peekwhich++];)?  Does the redirection you referred to earlier (when clicking on the image) happen in this same window or in a new (may be pop up) window?  It seems like the peekID array has a window object for each item but then in the rotateLinks function you seem to expect a string from the array to add to the URL.

Thanks for clarifying.

bol
0
 
LVL 6

Assisted Solution

by:sankar_ravi
sankar_ravi earned 250 total points
Comment Utility
Hi morphy,

The code below, in which block of code is replaced with new section given by you, worked fine for me. Here is the code...

<html>
<head>
<script language="javascript">
var peekaboo = new Array() ;
var peekID = new Array () ;
var theImages = new Array("images/amitabh1.gif", "images/amitabh2.gif", "images/amitabh3.gif")
var theIDs = new Array ("169", "104", "061")
var peekwhich = 0;
var peekwhich1 = 0;
var speed = 5000; // millliseconds

if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
}
}
 {
   for (y=0;y<theIDs.length;y++) {
      peekID[y] = new String();
      peekID[y] = theIDs[y];
        }
        }

function rotate()  {
   document.images["pic"].src = peekaboo[peekwhich++].src;
   // status = peekwhich + ':' + document.images["pic"].src
   if (peekwhich>=peekaboo.length) peekwhich=0;  
   setTimeout("rotate()",speed)
}
function rotateLinks() {
         window.parent.location.href = "details.asp?" + peekID[peekwhich++];
         if (peekwhich1>=peekID.length) peekwhich1=0;
         setTimeout("rotateLinks()", speed)
         }
 </script>  
</head>
<body onload="if (document.images) rotate()">
<a href="javascript:rotateLinks()"><img name="pic"></img></a>
<span id = SpoonID></span>
</body>
</html>

Any more issues, let me know.
Thanks.
0
 

Author Comment

by:morphy0186
Comment Utility
Thanks everybody for your comments. I am sorry for the delay in replying. I am at my day job at the mo so I will review tonight. I really appreciate this.
0
 

Author Comment

by:morphy0186
Comment Utility
Hi ,
The code did work, but incremented the ID so that the link to the details page passed over the ID for the next record rather than the current one. I have managed to resolve the problem and the javascript is below. Thank you both very much for your help I will distribute the points evenly.

<script language="javascript">
var peekaboo = new Array() ;
var theImages = new Array("<% = ASPoutput %>");    
var peekwhich = 0;
var speed = 5000; // millliseconds
// works out the length of the string called from the database and assigns it to a variable
if (document.images) {
   for (i=0;i<theImages.length;i++) {
      peekaboo[i] = new Image();
      peekaboo[i].src = theImages[i];
}
}

function rotate()  {
   document.images["pic"].src = peekaboo[peekwhich++].src;
   // status = peekwhich + ':' + document.images["pic"].src
   if (peekwhich>=peekaboo.length) peekwhich=0;  
   setTimeout("rotate()",speed)
}
function rotateLinks() {
            currentID = (document.images["pic"].src.substr(33,3))
         window.parent.location.href = "details.asp?" + "SpoonID=" + currentID;

         }
 </script>  
</head>
<body onload="if (document.images) rotate()">
<a href="javascript:rotateLinks()"><img name="pic"></img></a>
</body>
</html>
0
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
Your welcome!  I'm glad I could help.  Thanks for the fun question, the grade and the points.

bol
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This video teaches users how to migrate an existing Wordpress website to a new domain.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now