|
dev
newsgroups
|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
how do i set up a film strip in Frontpage?I'd like to set up a filmstrip of images that the user can move through at
the bottom of the web page. Also, by hovering over each picture a large version of the image appears above the filmstrip. By clicking on the image will a new page dedicated to that image appears. Can this be done in Frontpage? And if so, how? Yes, it can be done using JavaScript.
e.g <img ........... onmouseover="showlarger()" onclick="new page()"...> The function showlarger() would display the image in another <div> on the same page The function newpage() would open another page which displays the image Do you need help to write the JS? Show quoteHide quote "Bob" <B**@discussions.microsoft.com> wrote in message news:947468D6-E0C4-416C-999C-9E59199B96BF@microsoft.com... > I'd like to set up a filmstrip of images that the user can move through at > the bottom of the web page. Also, by hovering over each picture a large > version of the image appears above the filmstrip. By clicking on the image > will a new page dedicated to that image appears. Can this be done in > Frontpage? And if so, how? Thanks Trevor. Yes, an example would help a great deal. I've made thumbnails
of the images. But, after adding the following code for the mouseover part, the result was an error message that says the "image_02 is undefined": <img border="0" src="images/image_01.jpg" width="45" height="67" onmouseover="showlarger(images/image_02.jpg)" width="250" height="373"></td> I'd like the larger image to appear centered on the page, either just above or below the row of thumbnails. This is the <div>? How do I define that in the code? Does the onclick portion that opens the new page go right after this, on the same line? Much thanks, Bob Show quoteHide quote "Trevor Lawrence" wrote: > Yes, it can be done using JavaScript. > > e.g > <img ........... onmouseover="showlarger()" onclick="new page()"...> > > The function showlarger() would display the image in another <div> on the > same page > The function newpage() would open another page which displays the image > > Do you need help to write the JS? > -- > Trevor Lawrence > Canberra > Web Site http://trevorl.mvps.org > > "Bob" <B**@discussions.microsoft.com> wrote in message > news:947468D6-E0C4-416C-999C-9E59199B96BF@microsoft.com... > > I'd like to set up a filmstrip of images that the user can move through at > > the bottom of the web page. Also, by hovering over each picture a large > > version of the image appears above the filmstrip. By clicking on the image > > will a new page dedicated to that image appears. Can this be done in > > Frontpage? And if so, how? > > > Bob,
IWGBTY (I will get back to you ) I have to go out now, but I should have time later Show quoteHide quote "Bob" <B**@discussions.microsoft.com> wrote in message news:3F1103B4-71E1-47A2-8764-C883F8483FBD@microsoft.com... > Thanks Trevor. Yes, an example would help a great deal. I've made > thumbnails > of the images. But, after adding the following code for the mouseover > part, > the result was an error message that says the "image_02 is undefined": > > <img border="0" src="images/image_01.jpg" width="45" height="67" > onmouseover="showlarger(images/image_02.jpg)" width="250" > height="373"></td> > > I'd like the larger image to appear centered on the page, either just > above > or below the row of thumbnails. This is the <div>? How do I define that in > the code? Does the onclick portion that opens the new page go right after > this, on the same line? > > Much thanks, Bob > > "Trevor Lawrence" wrote: > >> Yes, it can be done using JavaScript. >> >> e.g >> <img ........... onmouseover="showlarger()" onclick="new page()"...> >> >> The function showlarger() would display the image in another <div> on the >> same page >> The function newpage() would open another page which displays the image >> >> Do you need help to write the JS? >> -- >> Trevor Lawrence >> Canberra >> Web Site http://trevorl.mvps.org >> >> "Bob" <B**@discussions.microsoft.com> wrote in message >> news:947468D6-E0C4-416C-999C-9E59199B96BF@microsoft.com... >> > I'd like to set up a filmstrip of images that the user can move through >> > at >> > the bottom of the web page. Also, by hovering over each picture a large >> > version of the image appears above the filmstrip. By clicking on the >> > image >> > will a new page dedicated to that image appears. Can this be done in >> > Frontpage? And if so, how? >> >> >> Bob,
Below is some code which I found. It uses two FP functions which may be a bit of overkill, but seems to test for features used by different browsers. FP_setLayerText() replaces my showlarger(). I did not write function newpage() because <a href="" > does this. The mouseover behaviour is controlled by onmouseover= onmouseout=. The onclick action to open a new page is controlled by <a href="..." >. If you want centring on this page, you would have to open the same page every time and add the image into it as centred which requires extra JS It uses absolute positioning of the <div>s which is clearly set out in the code and can be altered to suit. I have altered the <div> size to suit image size. The horizontal positioning is set:as 30% but could be set to px. I used some test files 1.jpg , 2.jpg , 3.jpg of dimension 386*386 on the folder "images" and thumbnails of the same name of dimension 65*65 on the folder "images/thumbnails" Code follows <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Slideshow Demo</title> <script type="text/javascript"> function FP_setLayerText(id,txt) { var el = FP_getObjectByID(id); if(el.innerHTML) { el.innerHTML = txt; } } function FP_getObjectByID(id,o) { 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> </head> <body> <div id="layer1" style="position: absolute; width: 420px; height: 420px; z-index: 1; left: 30%; top: 30px; font-family: trebuchet,verdana,arial,sans-serif; font-size: 14px; font-color: black; background: #FFC; border: 2px green inset; padding: 15px;"> Watch this space </div> <div id="layer2" style="position: absolute; width: 420px; height: 50px; z-index: 1; left: 30%; top: 450px; font-family: trebuchet,verdana,arial,sans-serif; font-size: 14px; font-color: black; background: #FFC; border: 2px green inset; padding: 5px;"> <!-- <a > tags were onclick= --> <a href="images/1.jpg" onmouseover="FP_setLayerText('layer1', '<img src = "images/1.jpg">')" onmouseout="FP_setLayerText('layer1','Watch this space')"> <img src="images/thumbnails/1.jpg" alt="" height= "50px"></a> <a href="images/2.jpg" onmouseover="FP_setLayerText('layer1', '<img src = "images/2.jpg">')" onmouseout="FP_setLayerText('layer1','Watch this space')"> <img src="images/thumbnails/2.jpg" alt="" height= "50px"></a> <a href="images/3.jpg" onmouseover="FP_setLayerText('layer1', '<img src = "images/3.jpg">')" onmouseout="FP_setLayerText('layer1','Watch this space')"> <img src="images/thumbnails/3.jpg" alt="" height= "50px"></a> </div> </body> </html> Show quoteHide quote "Bob" <B**@discussions.microsoft.com> wrote in message news:3F1103B4-71E1-47A2-8764-C883F8483FBD@microsoft.com... > Thanks Trevor. Yes, an example would help a great deal. I've made > thumbnails > of the images. But, after adding the following code for the mouseover > part, > the result was an error message that says the "image_02 is undefined": > > <img border="0" src="images/image_01.jpg" width="45" height="67" > onmouseover="showlarger(images/image_02.jpg)" width="250" > height="373"></td> > > I'd like the larger image to appear centered on the page, either just > above > or below the row of thumbnails. This is the <div>? How do I define that in > the code? Does the onclick portion that opens the new page go right after > this, on the same line? > > Much thanks, Bob > > "Trevor Lawrence" wrote: > >> Yes, it can be done using JavaScript. >> >> e.g >> <img ........... onmouseover="showlarger()" onclick="new page()"...> >> >> The function showlarger() would display the image in another <div> on the >> same page >> The function newpage() would open another page which displays the image >> >> Do you need help to write the JS? >> -- >> Trevor Lawrence >> Canberra >> Web Site http://trevorl.mvps.org >> >> "Bob" <B**@discussions.microsoft.com> wrote in message >> news:947468D6-E0C4-416C-999C-9E59199B96BF@microsoft.com... >> > I'd like to set up a filmstrip of images that the user can move through >> > at >> > the bottom of the web page. Also, by hovering over each picture a large >> > version of the image appears above the filmstrip. By clicking on the >> > image >> > will a new page dedicated to that image appears. Can this be done in >> > Frontpage? And if so, how? >> >> >>  
Other interesting topics
|
|||||||||||||||||||||||
