Solved

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

Posted on 2004-04-14
16
137 Views
Last Modified: 2010-04-25
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
Comment
Question by:aswhitehead
  • 8
  • 4
  • 3
16 Comments
 
LVL 35

Expert Comment

by:mrichmon
ID: 10828495
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
 
LVL 19

Expert Comment

by:webwoman
ID: 10832928
Are you swapping only one image?

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

Author Comment

by:aswhitehead
ID: 10835173
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
 
LVL 35

Accepted Solution

by:
mrichmon earned 250 total points
ID: 10837142
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
 
LVL 19

Expert Comment

by:webwoman
ID: 10837997
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
 

Author Comment

by:aswhitehead
ID: 10842166
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
 
LVL 19

Assisted Solution

by:webwoman
webwoman earned 250 total points
ID: 10842822
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 35

Expert Comment

by:mrichmon
ID: 10843303
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
 

Author Comment

by:aswhitehead
ID: 11155239
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
 

Author Comment

by:aswhitehead
ID: 11180720
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
 

Author Comment

by:aswhitehead
ID: 11180735
I am going to raise the points on this one to accomodate someone modifying the code for me.
0
 

Author Comment

by:aswhitehead
ID: 11180738
It is now at 500.
0
 

Author Comment

by:aswhitehead
ID: 11225490
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
 

Author Comment

by:aswhitehead
ID: 11225527
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
 
LVL 35

Expert Comment

by:mrichmon
ID: 11225688
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

758 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

21 Experts available now in Live!

Get 1:1 Help Now