Forum Moderators: open
This is my first post. Please excuse my confusion/ignorance. I am somewhat new to this kind of development.
I am trying to create a page with a bunch of thumbnails on one side. A mouseover of a particular thumbnail would result in an image OR an html file being displayed elsewhere on the page.
Well, of course it works fine with just images, (I just created a little javascript function passing in a parameter to which to set the img object's src) but when I attempted to replace the html code:
<img src="a.jpg">
with objects:
<object type="text/html" data="a.html">
and tried re-setting "type" and "data" attributes in my js function accordingly for jpegs/html files it didn't seem to work.(it seems objects aren't fully supported?)
So, I went a different route and created an iframe. It would be nice if the src of the iframe could be set to either an html file or an image file, but I'm not sure this is considered proper. Setting the src to an image file kind of worked in the browsers I tried, but in IE, the background-image setting for the top level page gets discarded.
ie.
<iframe class="mainFrame" src="a.html"> was fine as expected
when I changed the src to "a.jpg" the image displayed, but I need a way to have a background-image display as well.
So, the next thing I tried (and I may be completely misinterpreting something in the O'REILLY html reference here) is to generate an html file using javascript and set the iframe's src to that. I am basing this idea on:
"You may also use the javascript: pseudo URL to have the returned value of a script appear in the frame" - from the OREILLY reference manual.
Now I was hoping this meant I could create a javascript function and within it issue a document.writeln or two to create a simple html file using the image files' names in a <img...> line. (The names would be passed as parameters)...
function makeHTMLfromImage(imageFile) {
var imgLine = "<img src=" + imageFile + ">";
document.writeln(imgLine);
}
Then hopefully I could add some stuff to this function to get the background-image straightened out. Does this seem completely off-base?
If not....
What should I return from this function (if anything)assuming that I will have the following
<iframe class="mainFrame" id="mainimage" width="650" height="850" frameborder="0" src="javascript:makeHTMLfromImage(a.jpg)">
and I'll be resetting the iframe's src in an onMouseOver event handler later.
I've basically tried what I've proposed here; it doesn't seem to work. I'm unclear about the return value from my js function.
Interestingly, if I avoid creating a separate function, but instead embed the javascript directly into the html, it works. But it defeats my purposes by creating code bloat!
This:
<iframe class="mainFrame" id="mainimage" width="650" height="850" frameborder="0"
src="javascript:document.writeln('<body background=bgColor.gif> <img src=a.jpg></body>');document.close();">
<img src="a.jpg" alt="April">
</iframe>
...appears to work.
Can anyone provide any help here? Thank you in advance.
take a look at AJAX (asynchronous JS) and perhaps some server side scripting (like PHP). There are tons of references on the net...you can start with this
[w3schools.com...]
and go from there
What comes to mind is using PHP to generate the content into a div that has the overflow set to scroll.
Essentially, the <iframe> must be refreshed by calling location.refresh(). Before doing this, you must change some value in the parent that can be read by the <iframe> so that it knows what html to generate.
I used a method like this (with a frameset) some years ago and it worked well, however, I seem to recall that it broke that back button in Opera.
If you have a smallish set of data to display you might consider simply using javascript/css div.style.display = 'none' or 'block'.
For speed, load only what is required initially and load the rest when the page finishes loading by using something like <body onload="loadRestOfPage()">.
Kaled.
