Nav w/ images [Sitemap] - Digital Grin Photography Forum

View Full Version : Nav w/ images

brandofamily

Feb-24-2009, 05:04 PM

mwalters72

Feb-24-2009, 05:42 PM

I have different images at the top of my site (see link in my sig) that act as links to different galleries, and the images change on mouseover. It's all done with html and tables which you can see in my source code. I used the image slicer in Paint Shop Pro to create the html and then modified the image links to point to smugmug thumbnails.

I'm sure this method is probably not the easiest way to do it, but it's the first method I figured out that worked so I went with it.

You could use this same idea to make graphic link buttons that change when you mouse over them.

brandofamily

Feb-24-2009, 05:54 PM

thanks, but I know I can keep it simple by specifying the link and hover images for each link. I just can not find the code that does it...

jfriend

Feb-24-2009, 05:55 PM

I know how to build a navbar. But what I'm trying to do is build a new version that uses one image for the link state and another for the active state. I can not figure out how to code it. Thanks for the help... What do you mean by "active state"? Do you mean mouse over the tab or do you mean the currently displayed tab?

If you're talking about changing the image when the mouse is over the tab and you want this to work even in older browsers, then you have to use javascript with mouseover events to swap images.

If you're OK with images not changing for older browsers, then you can do it all with CSS. You put a blank gif placeholder in the actual navbar and you specify two different background images, one for the normal background and the other for the a:hover background.

If you're only talking about showing which tab represents the current page, then you just use CSS to change the background image based on what the current page is.

If you need more info that this, please clarify what you are trying to achieve and ideally give us a link to look at what you have so far so we can provide more specific CSS/HTML guidance.

brandofamily

Feb-24-2009, 06:11 PM

jfriend

Feb-24-2009, 06:27 PM

right now I have nothing to show you. I followed a link jfriend gave me on creating a tabbed nav bar and I'm trying to now add images. I want one image for the link and another once the link is clicked, or active. No change needed on hover.
Active as in Link, Visited, Hover, Active. I would use same image for 1st 3 and a new one for Active.
OK, let's imagine you have images that are 20 x 100. Then, you'd put this HTML in for each navbar item (though pick a unique CSS ID for each entry):

<li id="navBarItemGalleries"><a href="/galleries"><img src="/img/spacer.gif" height="20" width="100" border="0" /></a></li>

Then, you'd use CSS like this:

/* normal state for the galleries navbar item*/
#navBarItemGalleries {
background: url(/photos/12345657_4rI45O-O.jpg) no-repeat;
height: 20px;
width: 100px;
}

/* selected state for the galleries navbar item */
.galleries #navBarItemGalleries {
background: url(/photos/9876543_4PEWQ87-O.jpg) no-repeat;
}

In this example, I used the .galleries class on the body tag to tell me that the current page is the galleries page so the galleries navbar item should get a different background. You will have to find an identifying CSS indicator like that for each navbar item that tells you that the current page is the page for that navbar item. If it was a particular gallery, you'd use the .gallery_12358494 class to tell you it was that gallery displaying.

brandofamily

Feb-24-2009, 06:41 PM

here's where I'm at now...

<html>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/tabview/assets/skins/sam/tabview.css">

<***script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/tabview/tabview-min.js"></***********

<***script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</***********

<style>
#tab1 a:link {
background: url(www.smugmug.com/img/tabs/cat_prints_Bayinactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab1 a:active {
background: url(www.smugmug.com/img/tabs/cat_prints_Bayactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab2 a:link {
background: url(www.smugmug.com/img/tabs/cat_prints_EZinactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab2 a:active {
background: url(www.smugmug.com/img/tabs/cat_prints_EZactive2.png) no-repeat;
height:45px;
width: 148px;
}

#tab3 a:link {
background: url(www.smugmug.com/img/tabs/cat_merchandise_inactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab3 a:active {
background: url(www.smugmug.com/img/tabs/cat_merchandise_active2.png) no-repeat;
height: 45px;
width: 148px;
}
</style>

<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li id="tab1" class="selected"><a href="#tab1"><img src="/img/spacer.gif" height="45" width="148" border="0"/></a></li>

<li id="tab2" ><a href="#tab2"><img src="/img/spacer.gif" height="45" width="148" border="0"/></a></li>

<li id="tab3" ><a href="#tab3"><img src="/img/spacer.gif" height="45" width="148" border="0"/></a></li>

</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
</html>

I know it's not the same as yours, but I'm using some of your ideas... here's the page... http://www.brandolinoimaging.com/gallery/7420290_VmtMG#tab2
the images are not showing...

jfriend

Feb-24-2009, 07:27 PM

here's where I'm at now...

<html>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/tabview/assets/skins/sam/tabview.css">

<***script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/tabview/tabview-min.js"></***********

<***script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</***********

<style>
#tab1 a:link {
background: url(www.smugmug.com/img/tabs/cat_prints_Bayinactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab1 a:active {
background: url(www.smugmug.com/img/tabs/cat_prints_Bayactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab2 a:link {
background: url(www.smugmug.com/img/tabs/cat_prints_EZinactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab2 a:active {
background: url(www.smugmug.com/img/tabs/cat_prints_EZactive2.png) no-repeat;
height:45px;
width: 148px;
}

#tab3 a:link {
background: url(www.smugmug.com/img/tabs/cat_merchandise_inactive2.png) no-repeat;
height: 45px;
width: 148px;
}

#tab3 a:active {
background: url(www.smugmug.com/img/tabs/cat_merchandise_active2.png) no-repeat;
height: 45px;
width: 148px;
}
</style>

<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li id="tab1" class="selected"><a href="#tab1"><img src="/img/spacer.gif" height="45" width="148" border="0"/></a></li>

<li id="tab2" ><a href="#tab2"><img src="/img/spacer.gif" height="45" width="148" border="0"/></a></li>

<li id="tab3" ><a href="#tab3"><img src="/img/spacer.gif" height="45" width="148" border="0"/></a></li>

</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
</html>
I know it's not the same as yours, but I'm using some of your ideas... here's the page... http://www.brandolinoimaging.com/gallery/7420290_VmtMG#tab2
the images are not showing...

This is exactly why I hate giving advice when you won't show me a page with your start in it. You didn't tell me you were trying to use a YUI tabview. I thought you were talking about a navbar. The two are quite different in how you control them. Now, please explain in great detail what you are actually trying to do and why you're using a YUI tabview before I spend any more time offering advice.

brandofamily

Feb-25-2009, 02:21 AM

This is exactly why I hate giving advice when you won't show me a page with your start in it. You didn't tell me you were trying to use a YUI tabview. I thought you were talking about a navbar. The two are quite different in how you control them. Now, please explain in great detail what you are actually trying to do and why you're using a YUI tabview before I spend any more time offering advice.

Sorry, but I did not have a page to show you, it wasn't that I wouldn't show you. Not like I'm hiding anything... I'm trying to figure out how to make a page using YUI tabview. Similar to the SM help pages but not as detailed. I'm using the SM tab images to start with until I get it working. I started by looking here: http://developer.yahoo.com/yui/tabview/#start

the page I'm using is here: http://www.brandolinoimaging.com/gallery/7420290_VmtMG#tab2 except the tab images will not show up...

brandofamily

Feb-25-2009, 03:51 PM

bump

brandofamily

Feb-25-2009, 03:55 PM

I am trying to figure out how to set up the inactive and active tabs code...

jfriend

Feb-25-2009, 05:20 PM

I am trying to figure out how to set up the inactive and active tabs code... That's not something I've played with before.

brandofamily

Feb-25-2009, 05:22 PM

That's not something I've played with before.
can it be done if I was doing a regular navbar? If so, can you help me with that code? I'll try to adapt... I do pretty well w/ adapting...

jfriend

Feb-25-2009, 05:23 PM

can it be done if I was doing a regular navbar? If so, can you help me with that code? I'll try to adapt... I do pretty well w/ adapting... I gave you the code above for a regular navbar item.

brandofamily

Feb-25-2009, 06:03 PM

I gave you the code above for a regular navbar item.
tried it... no luck... yet...