Rollover Script Works But No Navigation Text?
Mar 30, 2011
I'm working on a website and am having trouble figuring out where I can add/edit the text for the navigation buttons, HOME, ABOUT, CONTACT, etc. There is a rollover.js file and the rollover effect works fine, I just can't figure out where to put the text for the navigation buttons and after a week of trying different things I thought I'd come here and try to get it working. My meager JS knowledge isn't enough. I started this website from a template in case you're wondering. Here's some of the code starting with where the images are preloaded then a few lines farther on are the onmouseover and onmouseouts.
<body id="page_1" onload="MM_preloadImages('images/bt_2_sel.jpg','images/bt_3_sel.jpg','images/bt_4_sel.jpg','images/bt_5_sel.jpg')">
<div class="main">
<!--==========header=========== -->[code].....
Are the mousseovers DHTML and not js I assumed they were js and were connected by the external rollover.js file.
View 2 Replies
ADVERTISEMENT
Oct 18, 2010
I am using the lava lamp plugin on my navigation page and I am having trouble fixing an issue I have got. I have it working perfectly, it sits right within he height of the nav and when I rollover it works. The only problem I have is when I rollover the lavalamp line does not align with the navigation text. I have attached a screen shot so you can see how it is working and if you wanted to have a look I have attached the code:
This is the CSS;
Copy code
ul, li {
margin: 0;
padding: 0;
} #line {
width:auto;
height:15px;
position: absolute;
z-index: 1;
top: 35px;
float:right; .....
This is the Jquery;
Copy code
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 2000,
color : 'none',
easing : 'easeOutExpo'
}, options); .....
View 6 Replies
View Related
May 8, 2009
I am trying to figure out whether or not there is an effective way to cut up the navigation on the right side of this banner so I can use the standard image swap. I am asking in this forum because I need to know if this will even work in the first place.
View 4 Replies
View Related
Aug 20, 2011
I am having a bit of trouble attempting to get this button roll over stuff working. I have looked up some really simple code to create a image rollover action for my navigation buttons. But nothing happens when I hover on any of the buttons though. When I use firebug to figure out what is wrong, it says that $(this) is the document and not the image button. The example/preview is here: [URL].
This is the jQuery code here for quick reference:
<script type="text/javascript">
$(document).ready(function(){
$('#navigation img').hover(
function() {
$(this).src = $(this).src.replace("Red","Yellow");
}, function() {
$(this).src = $(this).src.replace("Yellow","Red");
}); });
</script>
View 3 Replies
View Related
Oct 25, 2011
I'm building a WordPress site with a nice jQuery effect that fades/unfades images within a navigation menu on rollover. So when the mouse moves off the image, the colored image should fade back to reveal the original non-colored image. This works perfectly as-is, but client wants the active page to keep its colored/ highlighted menu image when mouse has moved off of it. The bolded line of the code is where I tried to set that up...
Code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<script type="text/javascript"><!-- this is from [URL]-->
// make nav images highlight on hover
// when the DOM is ready:
$(document).ready(function () {
// find the navigation elements and hook the hover event
$('#mainmenu li').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}}, function () {
// on hovering out, fade the element out
if (!is_page(current)){
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(2000);
}}});});
</script>
<ul id="mainmenu">
<li id="home">
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
<div>
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
WordPress should know whether the page is 'current' or not, so why doesn't this work? Currently the nav images remain highlighted when the mouse moves away. If I remove my attempt (the bolded line of code) then nav rollovers work beautifully, but active page still isn't represented with a colored nav menu image.
View 9 Replies
View Related
Jul 13, 2009
The rollover on my main nav is working fine in FireFox, but shows up strange in IE. I can't figure out what's wrong.
View 1 Replies
View Related
Apr 19, 2009
Instead of doing a regular rollover which would require me to make 50 images with text in photoshop on I want the rollover but want to add the the text in html for exmaple I want something like this [URL]
View 3 Replies
View Related
Jan 14, 2011
In the services section with the 8 images you can see how I am TRYING to make the site work. The idea is that when scrolling over an image the related text will appear in the right column. This is to happen for each image with different text for each. The problem (as I'm sure is quite clear from using the site) is that there is a lot of jumping. When an image is not selected the images should stay in 2 columns with text to the right.
"Scroll over the images for a brief description of the services we provide." I doubt I'm describing this well but this is all new to me... I have used javascript to control these rollovers.
[Code]....
View 2 Replies
View Related
Feb 7, 2011
Can any one tell me javascript for pop up text on mouse rollover on image like this site SNIP
View 3 Replies
View Related
May 3, 2011
Example script I can use to do the following.
Essentially I have text on the left (sizes) and an image on the right.
When you put your mouse over the text the image needs to change to show the corresponding image to the text.
I know this isn't hard but I just mustn't be using the right search terms to find an example.
View 1 Replies
View Related
Jun 1, 2002
is there a way to popup a small 'bubble' or 'balloon' of text when a user lets their pointer rest over a particular part of an image? (an image map)
explorer does this sometime (randomly it seems) when i let my pointer rest of an image that has alt text - it displays the alt text in a speech bubble thing - but only sometimes! so that is no good. also netscape doesn't have this and obviously i want something that'll work in both.
the reason i want to do this is this - i've got a simplyfied map (a geographical map) as a picture. there's a small piece of info i wish to show for each country, but the map is too small to allow me to put the information directly on the map - so i figured popup bubbles would be a good way.
View 7 Replies
View Related
Jul 30, 2002
I don't know any Javascript except for using image rollovers with the help of Photoshop and ImageReady, so please excuse my n00b knowledge.
I am looking for a tutorial that, when you cross over an image on one part of the page, text appears on another part of the page (e.g. describing that button).
View 3 Replies
View Related
Mar 6, 2010
I've seen on various websites where you can roll over an image or hyper link and a text box pops up. Some are very simple looking while others have graphics. I'm assuming it's done through Javascript but I'm not sure.
View 1 Replies
View Related
Apr 19, 2010
I have a table with two rows and a single cell in each. The top row will house images(s) that I would like to swap out using rollover text links in a lower cell like: 1 | 2 | 3... '1' would call 'img1.jpg' into the uppermost cell, '2' would call in 'img2.jpg', etc. on rollover.I'm certain this is simple to do, but google hasn't panned out for me so I'm hoping someone can give me a snippet of code to start with and I can manipulate for my purposes.
View 1 Replies
View Related
May 17, 2011
I have 6 image buttons that I want to create a rollover caption for. So for each image, when you rollover it a text title appears and thendisappearswhen you rollout. There will be a different title for each image and will be located in the sameposition. I'd also like to have the text fade in and out if it's not to complicated.I already have the following code to create a smooth image rollover:
$(document).ready(function() {
$('.fadeThis').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
[code]....
View 1 Replies
View Related
Aug 21, 2011
how to implement the same effect as the left hand side navigation bar on this site,
[URL]
I want the link to appear opaque when inactive but upon hover fade in darker.
View 3 Replies
View Related
Jun 5, 2010
I have navigation buttons that I'll call primary buttons. I also have secondary navigation buttons that I'll call secondary buttons. If you rollover a primary navigation button, it should make secondary navigation buttons 1,4,and 5 go to rollover state A. However, if you rollover secondary navigation button 1,4 or 5 they should go to rollover state B.So the simplest way I can explain it is that the secondary navigation buttons need two rollover states possible.
View 2 Replies
View Related
May 11, 2010
Before, I had an iframe, and when I moused over a link outside the iframe, it would load a page into the iframe. Background image was part of the page loaded, as well as the text and what not. The problem was, the image took too long to load. I've been learning how to do javascript and I came across some code for preloading an image before the mouseover so there was zero wait time. For the past few days I've been trying to figure out how to have the preload image appear BENEATH the iframe (now with no background image or color) with the allowtransparency attribute set to true.
I've figured out the code to do both individually, i.e. I have the code so that when the link is moused over, the new image will appear; AND I have the code so that when the link is moused over, the page with load into the iframe. Both work, both do what is expected, but they don't do it together.Below is the script. Here's where it's confusing. If I have the "setupImgRollover..." first inside the if statement: the page loads into the iframe, but there is no image. If I have the "setupImgRollover..." after the "document.link..." commands in the if statement: the image appears but the page does not load into the iframe.
HTML Code:
window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
[code]....
View 2 Replies
View Related
Nov 2, 2009
I'm trying to implement a minimal navigation bar using jQuery's toggleClass() function but can't seem to get it working.
It's the .img_selector div at the bottom of the page:[url]
I want to toggle the 'active' class for each <a> when it's selected, to indicate which image is showing, so after calling jQuery, in the <head> I've got:
Then the links, which also include the showPic function:
View 4 Replies
View Related
Apr 18, 2010
I am not terribly familiar with Javascript but i am looking forward to learning, and currently the problem I am facing is this:I have an a file being included to an .shtml document, that serves as my navigation, the code is like this:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>
[code]....
View 12 Replies
View Related
Feb 6, 2011
I want to create an own horizontal navigation and so the navigation is a nested list like
<ul id="mymenu">
<li>entry1
<ul class="abc">
[code]....
View 3 Replies
View Related
Aug 8, 2009
<div>
</div><div>I did some navigation menu and sub menu using jquery ,</div><div>
</div><div>like ;</div><div>
</div><div>Menu1 </div><div> Sub menu1(some.php)</div><div> Sub menu2(some1.php)</div><div>
[Code]..
View 1 Replies
View Related
Jun 22, 2009
I just can't win with this site. Everytime I fix a problem, another arises.[URl].... If you view the site through IE, within the 'Upcoming Shows' i/frame, you will see some scrolling text (bottom to top).
The page that holds the code is www.mrbizness.com.au/updates.asp (the iframce pulls the code)
The problem is, it only seems to work in IE. When you view it in FF or Safari, instead of scrolling the text, it just displays the code. I've been awake for far too many hours, and consumed WAY too much PEPSI, so my eyes just aren't working anymore.
Anybody have any ideas why it would be doing this? I really want to get the site finished and be done with it...I think it's posessed.
View 2 Replies
View Related
Feb 8, 2009
I have been trying to code something in Javascript. It works in Firefox, Safari and Chrome, but it doesnt work in IE7. To give a brief summary, i have an option list drop down menu, and when a user selects one the javascript will update text and an image. The changable text id="itemname", and the image id="itemimage" The javascript code is this:
<script type="text/javascript">
function setitem(id, name, referrals, el) {
var images = document.getElementsByTagName("img");
for (i = 0; i < images.length; i++)
document.getElementById("itemimage").src = el;
document.getElementById("itemname").innerHTML = name;
[Code]...
View 16 Replies
View Related
Jan 19, 2009
Ive been working on a site with a dropdown menu. its styled with css and animated with java i would like to add support for keyboard navigation.
var DDSPEED = 5;
var DDTIMER = 5;
main function to handle the mouse events [code].....
View 1 Replies
View Related
Dec 13, 2006
I'm just restating my "site abandonment" post but with a clearer title as I realized it probably only made sense to me and me alone.
I have window that pops up with our commerce system. I have it set to pop up a window via JavaScript if the visitor quits early in the process (abandons the commerce system before completing all of the steps. The new popup is just a customer survey ("why are you leaving, is there something else we can help you with" etc. etc.).
Here's the problem, it works fine in IE, but in Firefox, anytime the page in the original commerce window is changed, refreshed or advanced to a new page, the survey popup window is called rather than just on window close.
Again, here's the two JavaScript routines that handle clicks on the graphical close button and on the window 'X' close button. Code:
View 9 Replies
View Related
