View Full Version : question about using images

03-21-2005, 04:14 AM
This post is in reguards to this script: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

This script works exactly like I need one too. However I have a mouseover and mouse down (or selected) images I want to use instead.

Is there any way to easily alter this script to do that? I'm very new to CSS and JavaScript.

Hope you can help, and Thanks.


03-21-2005, 05:28 AM
If you want the images in the tabbed part of the menu, you should be able to insert them here:

<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>
</ul>in place of things like "Dynamic Drive" "What's New" etc. You can add your mouseover/down/out events to the anchor statements (<a href="...etc> just before the closing '>', after the onClick event. If you want images in what is called the tabcontent area, simply substitute them for the text shown there, an anchor with mouse events can be added there too. This is all untested but, looks like it should work fine as long as your images are not so big that they overwhelm the layout. It is all basic HTML, with mouse events added, applied to the existing HTML portion of the menu, shouldn't affect the script or require modifications to the script.

03-21-2005, 06:07 AM
I tried that, but it didn't work out so well. I could still see the css colors behind the image and none of the mouse over effects worked.

Plus, I couldn't tell which menu item was selected.

Perhaps an example of how to correctly implement the mouseover effect and image will solve the one problem, but what about the selection issue?

Thanks for the help, I appreciate you taking the time.

03-21-2005, 06:11 AM
Well, let me clarify, I know enough about css to know why the colors came through, and I did type the anchor tag wrong.

So I guess the only thing left is how can I use my custom image for the selected tab?

By the way, I only need images for the "tabs", the submenus are all text.

Thanks again.

03-21-2005, 06:32 AM
PLEASE: Include a link to your page that you want help with.

I put the above in from my clip collection because it would be so much easier to help if I could see what you are trying to do.

03-21-2005, 11:22 AM
if you would like to look at the test page with the tabbed script i'm
playing with now, you can find it here:

However it's really a cut and paste, the only edit i've done to the script is I moved the sub menu to where I want it. None of my attemptes at including the images are there because well, I've scrapped most of them.

also, right below the tabs, you can see the menu images I want to
associate with the script but I took the script out that controlled
the mouseover and mouse down effects for that menu. This page is a
work in progress, and i'm an amateur...so it's pretty bad. keep that
in mind.

I know NOTHING of web related stuff...so I'm at a complete loss.

Thanks for taking some time an looking. I appreciate it.

- Show quoted text -

03-21-2005, 11:29 AM
I do have an older scrpit that I was using but it wasn't working nearly as well as the tabbed script I found. But the mouse over and mous down effects on that menu ARE what I'm looking to do with the tabbed menu. The reason I scrapped this page is because when the page would refresh, it would loose it's selection. Also, if I clicked the menu option a second time, the sub menu would dissappear.

Again very buggy, and this page is all but abandoned, but you can get an idea of what i'm looking for the menu as far as appearence here: http://www.rvcchurch.com/wordpress/

for what I want function wise, use the link I gave earlier: http://www.rvcchurch.com/test.htm

I hope this helps in me be clearer about what i'm trying to do.

03-21-2005, 11:56 PM
Ok, I've been playing with it some. The most current version is here: http://www.rvcchurch.com/wordpress

I'm so close, but there are a few bugs still.
1. No working mouseover effects
2. No working selection effects
3. It's not loading the href link associated with the tab, but it is showing the submenu.
4. For some reason Firefox is showing bullets.

Thanks for the help. I just can't wait to get this working.


03-22-2005, 05:21 AM
1. No working mouseover effectsI didn't see any attempt at mouseover effects in your new page.

2. No working selection effectsNot sure what you mean by this.

3. It's not loading the href link associated with the tab, but it is showing the submenu.Do you want it to load the links when the tab is clicked, or when something in the submenu is clicked? I would think the latter. If I am right, configure the links in the tabcontent areas.
4. For some reason Firefox is showing bullets.No problem in Firefox here.

The page does seem to be shaping up. What do you want onmouseover?

03-22-2005, 11:51 AM
Yeah, I was a moron about the CSS/Firefox issue. I fixed that.

1. about mouseovers
-all attempts failed there. The page isn't showing any cuz I got nothin. No Idea how to even approch it.

2. about selection
- I want to be able to know which tab is clicked / which submenu is showing. I'm guessing an onclick will help that. I have all the mouseover and onclick images I need/want.

- Also, IE is remembering my menu selection correctly (it is at reloading the submenu when the page refreshes). HOWEVER, firefox is not.

3 About loading Hrefs
- I do have some general content about the tab selection I want to appear in the main body at the same time the sub menu for that tab is displayed.

I'm about to just go to drop down menus. lol. I think they would be easier than what I'm attempting.

03-22-2005, 03:43 PM
Well, I wouldn't give up just yet.

OK general 'quick and dirty' for beginners onmouseOver for images:

<img src="some.jpg" onmouseOver="this.src='someother.jpg';" onmouseOut="this.src='some.jpg';">

I'm going to skip the part about selection for now, as you say, it is working in IE, appears to degrade well in FF.

About loading hrefs or links:

When I say 'load an href or link' I mean actually switching to the new page. I would think the tabcontent area is where you want opportunities for that. For example, where you have:

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
</div>just substitute the link for the ministries page and some appropriate language, like:

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.rvcchurch.com/wordpress/ministries.htm">Ministries Page</a> for information on our faith in action.
</div> all for now.