Forum Moderators: open
So here's where I'm at: I got the page thumbnails to be transparent and rollover to solid (although I think this is only ie compliant) But my attempts at the script to put up a new window are failing miserably. I don't know javascript at all but I do know some programming and html very well so I scoured the internet for code examples and they didn't work and then I modified them and so now I might be way off. Any help would be great.
Here's the head code for the transparent thumbs:
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function makevisible(cur,which){
if (which==0) cur.filters.alpha.opacity=100
else cur.filters.alpha.opacity=65 }
</SCRIPT>
and the call for it:
<img src="../images/photothumb/photo16.jpg" width="60" height="60" border="0" style="filter:alpha(opacity=40)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">
Ideally this would work on more browsers... the other opacity codes are -moz-opacity:0.6; opacity: 0.6; -khtml-opacity: 0.6; But I'm not sure how to integrate them.
Here's the head script for the new window:
<script language="javascript" type="text/javascript">
<!--
function DisplayImage(picURL,picTitle){
newWindow=window.open(picURL,config='toolbar=no,menubar=no,scrollbar=no,width=475,height=475')
newWindow.document.write('<html><head><title>'+picTitle+'<\/title><\/head><body><center><br><br><img src="'+picURL+'"><\/center><\/body><\/html>')
newWindow.focus()
}
//-->
</script>
This code isn't working at all. I'm trying to get it to write a basic html file so it doesn't default with margins although then I'm basically adding my own margins but in an aesthetic manner :)
Here's the current call for that bit of code:
<a href="javascript:DisplayImage('../images/portfolio/photo16.jpg','Photography Gallery')">
If it matters the <img tag is within the <a tag.
Thanks!
window.open('picURL','window_name','window_attributes');
If you leave an item out, such as the window name, I believe you should still have an empty string in the code as:
window.open('picURL','','window_features');
Additionally, I don't think you need to escape your forward slashes like <\/head>. Just </head> should be fine, I don't believe \/ is even a recognized escape sequence (though \\ is).
You seem to be using picURL both as the href for the window and as the SRC for the image which is part of the markup for the window. That's redundant and the document.write() will wipe out the first load of the image, anyway. You can open the window without a URL, just use an empty string as the first attribute in the window.open() command.
Image transparency is a fairly new feature for browsers, and isn't very cross-browser compatible. Unfortunately, the only work-around is to have two sets of images and swap a partially transparent image with a solid image using standard DHTML techniques. Obviously, this can result in bandwidth issues.
Accommodating different browsers usually requires browser sniffing. IE can be identified by testing for document.all and Moz can be identified by testing for "Gecko" in the user agent string using indexOf().
Note also, that IE filters come in two flavors: Old filters (IE 4 through 5) and new filters (IE 5.5 on). From what I've read, the new filters work through ActiveX, while Moz handles the opacity value as an additional CSS attribute.
KHTML is the rendering engine for Konqueror, the KDE browser that is the basis of Safari, so I expect the -khtml~ statement is for those browsers. Here's a thread that addresses identifying those agents: [webmasterworld.com...] As for Opera, I am not aware of it supporting transparency, but you would need to do some research.
[edited by: Rambo_Tribble at 3:48 am (utc) on May 18, 2004]
... the other opacity codes are -moz-opacity:0.6; opacity: 0.6; -khtml-opacity: 0.6; But I'm not sure how to integrate them
I suppose the best thing to do is to put them all into a stylesheet an assign an id or class - just to make things easy.
AFAIK, you can just list all the proprietary CSS properties in the style rule / inline style. Browsers that they don't apply to will simply ignore them.
When it comes to the scripting change, things may be different. Notice that IE changes it's alpha value directly on the element, not via it's style object. Does Mozilla do that? [dunno]
One way around that could be to have 2 separate class definitions for the visbility states, then have makevisibilty change the className on the element instead.
Oh and..
Ideally all the images would open in this same window.
<script language="javascript" type="text/javascript">
<!--
function DisplayImage(picURL,picTitle){
newWindow=window.open('','Photography Gallery','toolbar=no,menubar=no,scrollbar=no,width=475,height=475')
newWindow.document.write('<html><head><title>'+picTitle+'</title></head><body><center><br><br><img src="'+picURL+'"></center></body></html>')
newWindow.focus()
}
//-->
</script>
And to Bernard... I actually have a class with all of the opacity commands in it which I was already using for a table background but I couldn't get it to work on the img for some reason. I think I wasn't calling it right in this context. Could you show me how to modify my other code to call the class instead? I've got two classes setup as .trans and .trans2 for the opacity.
Thanks!
[pre]
function makevisible(elem,bTransp)
{
elem.className = (bTransp)? "trans2" : "trans"; // edit: switched
}
[/pre]Perhaps, strictly, we should use setAttribute() to change the className, but
not many do.
As to the window code, I can't see anything wrong with it at the moment. Hmmm.
Maybe there's problem with the function call?
Is there an error message?
As to the other part. It says error on page in the bottom corner of my ie6 window but I can't tell where it's at or what it is.
Oh and I realized I was overthinking the transparency thing. I just added class to the img tag and it works now.
Thanks!
write ¦¦ writeln won't make any difference to the final output. writeln - in common with similar methods in other languages - adds a line break at the end of the line (that is new line character(s). The only place I imagine it makes a difference is if writing between <pre> or <textarea> tags.
- then again, it could also make a difference if you ended up splitting an attribute value between lines.
