Iframes and Background Images

[mfurf]

Is there a way to make an iframe transparent in IE 5.5+ so that a background image shows through? Or if not, can iframes have user-defined backgrounds?

In Mozilla the menus look great since the Moz is defaulted to hide empty iframes. Thus the menus in Mozilla lend themselves to creating a theatre of images crashing through the "wall" but not in IE where the drab empty iframe stares you in the face. In both I can get the submenus to open over the iframes. But the Moz wins hands down on appearances. Thought someone out there might have encountered the same problem.

I don't mean faking it by seeding the iframe with the background image since it wouldn't seam right [sorry for the pun]!

/mfurf

[Hergio]

Yes, using CSS you can set the opacity of an iframe in IE.

Code: Select all

<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);" src="http://www.google.com" width="700" height="400" id="myiframe" name="myiframe"></iframe>

[mfurf]

Gratias Hergio! Such timely response at this late hour in Buffalo. I will try this pronto so that I can catch some shuteye. /mfurf

[Hergio]

Aint that the truth!! I was working on an application for a friend of mine and my does time fly. Its time for some shut eye for me too...now that its 1:30am...sheesh!

[mfurf]

Hergio: The opacity code worked to a tee, after several false starts due to Mozilla not recognizing the command. I reverted to my FTP editor (UltraEdit32) in order to save it; I couldn't take my usual shortcut of snugging it into the html code in Mozilla where [one would here imagine Bill Gates taught Mozilla well] the Moz simply refused to save code on behalf of its competitor.

Now [and maybe if Kevin is reading here, he could have a go at it also] it would be pluperfect if I could attach that code to a menuitem in order to vary the opacity. I've had a quick look at Kevin's cool mm_alwaysVisible.zip and wondered if something similar is possible with the transparency command. It would need to be in the same code in which the menuitem executes a url call etc. or cool, maybe even the showmenu option.

Also, can it be attached to a css element, e.g. I have a border element defined as

Code: Select all

{
border-style: solid; color: #ff0000; 
border-width: 5px 10px; 
}

Can the transparency code be somehow inserted or if not, could the border element be given a style and assigned an id that can be manipulated with the menu? /mfurf

[Maz]

Anything that can be put in a style sheet, just add an item as onclass=thisstyle; and offclass=thatstyle;

Beyond that I can't help,
maz

[Hergio]

If you don't mind Kevin, I used your ideas and dug into the menu myself to find where overfilter is defined. I created a function very similar to yours to keep things easy for the peps here. But credit is due to Kevin for the initial idea.

Code: Select all

function mm_setFilter(menuName, filter) 
{ 
  var menuNum = getMenuByName(menuName); 
  _m[menuNum][25] = filter; 
}

This can be called as such...

Code: Select all

mm_setFilter('projects','Shadow(color=#777777, Direction=135, Strength=5)');

The filter can be any text string for filters that is currently accepted by the menu's overfilter. You need to pass both the menu name and the filter in as strings to watch your quotes and double quotes. Escape them if possible, in the example above, I removed the single quotes around the color and it worked fine. Feel free to add any parameters to the function so you may pass in an opacity for instance.

And please make note, this will REMOVE any previous overfilters you had on that menu. So if you had Fade on the menu and then called this function above, it would no longer fade into view. Change

Code: Select all

_m[menuNum][25] = filter;

to

Code: Select all

 _m[menuNum][25] += ";" + filter; 

to make it ADD to the menu's current overfilter.

Hope this is along the lines of what you were looking for.

[mfurf]

The filter can be any text string for filters that is currently accepted by the menu's overfilter.

I'm confoosed! Are you manipulating the opacity of the menu itself [not my goal but something I wouldn't mind knowing how to do] or using menuitem options to vary the opacity of an iframe [my goal]

Just asking as my knowledge of javascript is rudimentary.

I don't understand "projects". Is that another name for "any text string for filters"? And is there a list of acceptable strings [projects?] etc. ?

I've got more questions but we'll start with these. /mfurf

[kevin3442]

Dave,

I absolutely don't mind at all, especially since I've been pressed for time the last couple of days. Feel free to use, and improve upon anything that I might come up with. I like that you've stuck with the mm_ prefix and the menuName parameter; if we can both stick to that convention (and develop others as we go) it'll cerainly help to keep code extension more consistent, as you said. Nice job!

Mfurf,

This nifty bit of code changes the filter for the menu, not the IFrame. The example given doesn't really set the opacity, but you could pass in a filter that does; a filter parameter of 'Alpha(opacity=80);' would do that, making the menu slightly more transparent than the value of 90 used in the typical downloadable examples... opacity can vary from 0 to 100, with 100 being 100% opaque. The 'projects' you refer to is the first paramter passed to the function; which is the name of the menu to apply the new filter to. So in the example Dave gave, the function call would change the overfilter for the manu named 'projects'.

As for setting opacity of the IFrame... never tried that... Dave?

Kevin

[mfurf]

Kev:

This nifty bit of code changes the filter for the menu, not the IFrame.

That's reassuring because this whole chain started by my noticing how Mozilla defaults to hiding empty iframes behind the page background image [which gives a neat breakthrough appearance to images (of varying sizes) called by the menu] while IE defaults to keeping the Iframe visible.

This isn't too bad if the images fill the Iframe completely but still doesn't have the neat appearance of Mozilla.

Along comes Hergio [aka Dave] and gives me a way to attach filtering code to the Iframe at loading [see above] which meets my IE need sort of.

I was looking for a way to attach that code to a menu item to vary the opacity as the item executes.

But even as I write this I begin to realize I still wouldn't get the Mozilla effect. The page background image would simply fade in and out of the iframe which looks okay when a text page is called because it fills the whole iframe. That's the same for Moz or IE.

But with photo images of varying sizes and shapes - some of which don't fill the entire iframe, here's where the Moz shines because it only makes visible the photo-image in the iframe AND NOT THE PARTS OF THE IFRAME NOT FILLED BY THE IMAGE. For this effect, the Moz is king.

The Moz makes it look like the photo-images are breaking through the page wallpaper, including - neato - any added text in the photo page. This totally HIDES the iframe. IE can't seem to do this.

Talk about Mozilla cool: if there is space between the text and the image, the text and image will "break through" with the intervening space still filled with the original background image.

My customing of Andy's menus are still a work in progress but to see what I'm talking about you might view http://scripturewall.com first with Mozilla 1.4 and then with IE. Select the top menu item, select the next top submenu item [Simon Fraser Monument] and select Danny in the scrolling menu. I've just separated the text in that item to give the full effect. /mfurf

[Hergio]

Yup, you can do this from any href or button or even a menu item, just put it in as a url=javascript:functionName('obj',#); I did not follow the mm_ naming convention on this because technically this has nothing to do with the menu...but you can make it work with it if need be.

Code: Select all

function changeOpacity( objID, opacity )
{
  document.all[objID].style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ");";
}

This will change the opacity of whatever object you pass to it as long as it supports getting its opacity changed. It definetly works with IE, not sure iwth netscape. You can try it and if it doesnt work, I will put in the fix so it works with NS...I just dont have time now. You pass in a STRING of the object's id. So for example, i have an iframe as below. To change its opacity to 40, I would do something like.

Code: Select all

<iframe src="http://www.google.com" width="700" height="400" id="myiframe" name="myiframe"></iframe>

<a href="#" onClick="changeOpacity('myiframe',40);">HERE</a>

Hope this is what you were looking for.