• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 161
  • Last Modified:

Need to display an alternate image if the path is absent from the database and change the image (swap image) when rolling over links.

I have a dynamic website built in Dreamweaver MX using ASP/VBscript and an Access Database.  I have a dynamic page that has 50 text links and when you roll over the text links, the image swaps to the correct image based upon the id number of the record.  This works fine except I am missing some photos so I need to swap out the photo to an "image coming soon" photo is the path is absent from the database.

I have used the code shown below elsewhere on the site to show an alternate image if the path is absent from the database (we are missing some photos so i put up an "image coming soon" pic).  The page is laid out with records showing up vertically with a picture on the left and info on the right.  It works fine on this particular page:

http://www.fergusoncopeland.com/AdLib_Ven_Master.asp?Major_Category=Exposed%20Wood

Here is the code used on the above page:

<% if rs("sm")<>"" then %>
   <img src="default_images_path/<%=rs("sm")%>">
<%else%>
   <img src="sm_NIA.jpg">
<%end if%>

When I try to use this on the page with the 50 text links and try to swap the image out on rollover it doesn't work.  It leaves one photo (the first record) and will not swap when you roll over the links.  Can anyone help me with this?

Thanks,
Scott
0
aswhitehead
Asked:
aswhitehead
  • 8
  • 4
  • 3
2 Solutions
 
mrichmonCommented:
Well you are almost there.

You need to name your images so that it knows which ones to swap on the mouseover events.

It should end up with HTML similar to this :

<% if rs("sm")<>"" then %>
   <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('<%=rs("sm")%>','','rollover_images_path/<%=rs("sm")%>',1);">
   <img name="<%=rs("sm")%>" border="0" src="default_images_path/<%=rs("sm")%>"></a>
<%else%>
   <img src="sm_NIA.jpg">
<%end if%>

Then use the DW swamImage functions in your head :

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
0
 
webwomanCommented:
Are you swapping only one image?

You have one image on the page, and it shows whatever you've moused over?
0
 
aswhiteheadAuthor Commented:
Webwoman,

I am only swapping one image.  There are 50 links built from a recordset on the page and as you roll over them the 1 image changes.

With that being said, mrichmon's answer is over my head as far as deciphering the code.  Will it do what i am wanting it to do with only swapping ONE image?

Scott
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
mrichmonCommented:
Okay so I think you are saying htat you have 50 small images and when you mouseover they change one larger image - say on the side.

Then You need to adjust the link.

You have this :

<% if rs("sm")<>"" then %>
   <img src="default_images_path/<%=rs("sm")%>">
<%else%>
   <img src="sm_NIA.jpg">
<%end if%>


which shows the image.

Then you need the image in the page that will get changed out.  Maybe name it like this :

<img name="bigpicture">

SO you need to add a link to this image like this

<a href="#" onMouseOver="bigpicture.src='rollover_images_path/<%=rs("sm")%>';">
   <img name="<%=rs("sm")%>" border="0" src="default_images_path/<%=rs("sm")%>"></a>


That code doesn't even use any macromedia javascript - it just does on rollover it will change the bigpicture to be the new image.


This method is a little cleaner code, but is less flexible that the auto-generated code that Macromedia has if you don't know javasccript.
0
 
webwomanCommented:
The drawback being that the image has to load....

But definitely try the simplest way first, if that works and your big images aren't that big, go for it. ;-)
0
 
aswhiteheadAuthor Commented:
mrichmon,

I don't think this matters but my page has 50 TEXT links (not small images) and when you rollover them, they swap the ONE image that is off to the side.

I also had a couple of questions about the code:

I assume that these two snippets of code:

<% if rs("sm")<>"" then %>
   <img src="default_images_path/<%=rs("sm")%>">
<%else%>
   <img src="sm_NIA.jpg">
<%end if%>

and

<img name="bigpicture">

are applied to the actual image that is going to change.  So, where do i insert this code:

<a href="#" onMouseOver="bigpicture.src='rollover_images_path/<%=rs("sm")%>';">
   <img name="<%=rs("sm")%>" border="0" src="default_images_path/<%=rs("sm")%>"></a>

in relation to the other 2 snippets of code?

Thanks,
Scott
0
 
webwomanCommented:
It's your link. Replace the # with your file/url. If you don't have a small image, you'd put whatever text you have for the link in place of the <img name=".....
0
 
mrichmonCommented:
No that is the link - basically it is what will be moused over - it needs to be on all 50 images if you want the bigpicute to change when any of the smaller 50 images is moused over.

So this code :

<a href="#" onMouseOver="bigpicture.src='rollover_images_path/<%=rs("sm")%>';">
   <img name="<%=rs("sm")%>" border="0" src="default_images_path/<%=rs("sm")%>"></a>

replaces this line :

<img src="default_images_path/<%=rs("sm")%>">

which is inside the if statement.

Then you have to define the image to change with this line :

<img name="bigpicture">

wherever you want it to display onthe page...
0
 
aswhiteheadAuthor Commented:
Sorry it has taken so long for me to get back.  I had to pull off of this for about a month during our market time.

I think I have confused the issue a bit so i want to make sure that you all understand what my actual problem is.  I have succeeded in making the image change as I roll over one of the 50 TEXT links on the page.  I had that working before I posted to this site.  My problem has been that I have some records in the database that do not have photos yet.  The field for the photo path is left blank in the database.  I then use an if/then statement to check if there is a filepath.  If not, it displays an "image coming soon" jpg.  This has worked on many other pages that are set up as Master/Detail pages.  I cannot get this to work with the swap image function though.  When I roll over a record that doesn't have a filepath it shows a red "X" no matter if I have an if/then statement or not.  Would it help if I put this page up so that you could look at it?

Scott
0
 
aswhiteheadAuthor Commented:
I apologize that I am not very familiar with code.  I know that you all are probably giving me the answer but I am just not understanding where to put it.  If I put up my relevant pieces of code could someone modify them for me so that I can see where the changes are and where the code goes?

Thanks,
Scott
0
 
aswhiteheadAuthor Commented:
I am going to raise the points on this one to accomodate someone modifying the code for me.
0
 
aswhiteheadAuthor Commented:
It is now at 500.
0
 
aswhiteheadAuthor Commented:
I am sure that both of you have given correct info but I do not have the expertise to be able to utilize it.  Therefore I am going to split the points between webwoman & mrichmon.  I have figured out a different way of handling the problem from within the database before it hits the web.

Scott
0
 
aswhiteheadAuthor Commented:
I accidentally awarded all 500 points to mrichmon (split between 2 answers).  I meant to give him 250 and webwoman 250.  Is there any way to correct this?
0
 
mrichmonCommented:
You have 2 choices

1) post a "points for webwoman" question with a link to this one and just award her points that way
2) Post at support asking to re-open the question....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now