Change image on same page?

[shannon]

I have a page that I want to use to display photos, but I
don't want to use thumbnails, nor do I want all of the
images (15-20) to appear on page load. The idea is to
have one main photograph at the top (let's say the front
of a house). I'd like to have links below or to the side
of the main photograph that you can click to change the
main photograph (to view the backyard, bedroom, kitchen,
for example).

I'm not sure how to do this. Any ideas, or code to
share?

Thanks!

Shannon J.

 

[MD Websunlimited]

Hi Shannon,

Take a look at J-Bots Image Menu component. It allows you to create a menu of Image that when click change a single image on the
page.

See: http://www.websunlimited.com/order/Product/Image/Image_help_dir.htm

--
Mike -- FrontPage MVP '97-'02
http://www.websunlimited.com
J-Bots Plus 2002 87 components for FrontPage
http://www.websunlimited.com/order/Product/JBP2002/jbp_help_dir.htm
FrontPage Add-ins Since '97 2003 / 2002 / 2000 Compatible

 

[John Jansen \(MSFT\)]

You can do this with FrontPage 2003 pretty easily.

Insert your images on a page
Select one of the images and click Format > Behaviors
Use the Swap Image behavior (and swap image restore)

These functions are designed to allow you to mouse over or click one image
change the image that displays on another part of the page (or infact, that
image itself could also be swapped).

 

[MD Websunlimited]

While this is workable is a lot of work to create the menu items whereas J-Bots allows you to accomplish this is a single dialog
box.

With FP3

1. Place the image
2. Enter a text menu item
3. Select the text item
4. Open the task pane if not open
5. Select behaviors from insert drop down
6. Select Swap Image
7. Browse for a new image
8. Click on OK
9. Repeat steps 2 - 8 for each menu item

The below does not include the layout (table or CSS) required to display the menu.

With J-Bots:
1. Click on the J-Bots Toolbar Image Components drop down and select Image Menu.
2. Enter the menu item text
3. Click browse for the image to select the swap image
4. Repeat steps 2 - 3 for each menu item
5. Click Browse for the Initial menu item and select
6. Click Generate.

Layout of the menu is completed for you. You also can also specify the menu items initial color and the mouseover color. The type of
separator for the menu items, eg. order list, bulleted list, etc.

This is why we say "What is your time worth?" and time is money.

One other note:
The FP Behaviors adds alot of code to the page:
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs=new Image; d.FP_imgs.src=a; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>

Plus the code it adds to the text elements: <p onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'http://develop4/searchbut.gif')">
Image1</p> ( The onmouseover of the <P> is not supported by all browsers)

J-Bots add all the code to an <a> tag for browser compatibility and there are no function calls. The complete code sequence is
contained in the onmouseover event. < 100 characters total.

Using FP3 you can edit only a single menu item and then only by going to the Behaviors in the Task Pane. With J-Bots you can double
click the component on the page to add, change, or delete one or all of the menu items.

This is why our logo is "What is your time worth?" Time is money folks.