CSS Image menus

I'm tyring to make a menu for a website of photography, but I'm running into two problems. I unfortunately don't know much about CSS, so these may or may not be easy problems to solve.

Number one is the menu on this page:
http://bonaweiss.atspace.com/help/page1.html

In order to see the frist page of thumbnails, you need to hover your mouse over the PAGE 1 tab. Is there a way to code it so that page 1 is shown by default? You click the link, this page opens, and you are greeted with page 1, and you can switch to page 2 by hovering over the PAGE 2 link (and back to page 1 again by hovering over PAGE 1)?


Number two is the menu on this page:
http://bonaweiss.atspace.com/help/newwindow.html

I just want the photos to open in new windows, as opposed to it simply being displayed over the menu in the current window.

 

for your second question...you should just be able to add this to your links to get them to open in a new window

target="_blank"

so for example

<a class="horiz" href="#portrait1" target="_blank"><span><img src="thumb1.jpg" alt="" title="" /></span><em><img src="bonaweissdotcom_1.jpg" alt="" title="" /></em></a>

 

For question number one, yes it is possible, but you'd have to edit the css of the stylesheet. Right now, the menu is powered by the Css ":hover" selector, and you'd have to make quite a few changes to the stylesheets to remover the :hover instructions for just the first page.

For the second menu, I you'd have to edit the html to add the "target="_blank" " to your a links (there is no way to open a link in a new window with just css). Ie. <a href="photo.jpg" target="_blank">. You can use javascript to choose the size of the new window. You can also use Javascript to open the new windows when image links are clicked on instead of adding target="_blank" attributes to all of your links.

 

Thanks both of you, but adding "target=blank" to each link seems to only change what happens when I click the larger picture to close it. Even then, it's only opening a new tab.

The picture is still opening in this window, and only opens a new window when I go to close it and go back to the menu.

 

make sure you are doing "target=_blank" and NOT "target=blank" (notice the '_')

 

Woops, sorry. I'm doing "target=_blank", the post was just a typo.

 

It's actually target="_blank" not "target=_blank". Even then, I wouldn't use it. I'd go with a combination of JavaScript and the rel attribute.

For example:

<a href="somepage.html" rel="external">Some Page</a>

Code (markup):

with the following JavaScript code in the head section (preferably in an external library file):

function externalLinks() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") &&
		anchor.getAttribute("rel") == "external")
		anchor.target = "_blank";
	}
}
window.onload = externalLinks;

Code (markup):

Just make sure that if you have other scripts that are using multiple window.onload calls, to remove them all and put them into a single function, and call them from there.

 

Even with this, the new window only opens once I click the larger image to close it.

 

You might want to consider giving each new window a unique ID (name them) so that the script can reference them. I'm not a JavaScript expert, but that should do the trick.