Keep Highlighted Item In Image Map Rollover?
Jun 12, 2009
i'm using a great script from oreilly for an efficient rollover effect on an image map - highly recommend for anyone needing something like this - link is below - my question is how do i modify it so the menu item *stays* highlighted when the page is selected? that is, in the example, if you rollover or click 'home', the image changes, but once you select it, the effect goes away. i've tried a few things but am getting bogged down as to the best approach. [URL]
View 9 Replies
ADVERTISEMENT
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
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
Sep 14, 2009
I am looking for a script that would prevent an image from being highlighted by dragging the mouse.
View 1 Replies
View Related
Jul 12, 2010
I want to create something similar to what they achieve with this script:[URL] I know I could just download their script, but it's for a website that will be commercial in nature, and my cousin doesn't want to pay 29 pounds (which is a lot in AUD!) for it. I can use a rollover to display a larger image next to it, but I'm not sure on how to make the image move like that one does.
View 5 Replies
View Related
Jul 12, 2004
I've been using dreamwevaer to automatically do rollovers for me, and i dont really understand them that much, but i need to create a rollover image which when hovered another image would appear to the right of it. Would anyone know how this is done?
View 1 Replies
View Related
Sep 21, 2004
I have a two navigations areas; top and side. I need when someone rollovers the top button it'll change image and also change the button on the right left menu.
So summing up it's 4 images. Two normal states and two rollover states. When you rollover one, both need to change to the rollover state.
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
Mar 26, 2010
I'm trying to add an image rollover effect, but when I put it into play, the first image slowly fades into the second image and stays at the second image before I even hover my mouse over it.
View 3 Replies
View Related
Jun 22, 2010
Just wanted to know (seeming im a bit of a jscript beginner).
it is possible to have a background image rollover, and if so how.
View 3 Replies
View Related
Aug 10, 2007
I used to know the coding for image rollovers in html but forgot and I am dealing with a php script this time. Can anyone help me with the code to have it switch images when you put your mouse over it and change back when you take your mouse off of it? they are jpg extensions. I have 2 buttons to link to different websites.
View 3 Replies
View Related
Mar 3, 2006
I was reading up on how to make image map rollovers w/ only 2 images, for like a menu. and i came across this script: Code:
View 2 Replies
View Related
Apr 6, 2008
The problem i'm having is simply getting an image to swap on a mouseover. Well I sort of had it working but then I cahnged the function to try and accomodate for more images and it just fell over dead.
Let me show you the function I have for it. Bear in mind I'm used to coding but more PHP and VB rather than JavaScript
<script language="javascript1.5">
Rollimage = new Array()
Rollimage[0] = new Image(244,244)
Rollimage[0].src = "images/personal_up.png"
[Code]....
BTW I have searched google and read many articles on this but still can't get it to work. Also I have searched previous articles on DaniWeb and again none solve the problem.
The address of the page is [URL]
View 9 Replies
View Related
Jul 9, 2010
I have image rollover code. And I want to add functionality, for ex-this scripts roll overs images (slides them). I would like let it stops when onmouseover event. Here is script
<html>
<head>
<title>HTML ders | 09.07.2010</title>
<script>
var sekil1=new Image();
sekil1.src="bir.jpg";
var sekil2=new Image();
sekil2.src="iki.jpg";
var sekil3=new Image();
sekil3.src="uc.jpg";
var sekil4=new Image();
sekil4.src="dord.jpg";
var sekil5=new Image();
sekil5.src="bes.jpg";
</script>
</head>
<body>
<img name="az" src="bir.jpg" width="250" height="200">
<script>
var addim=1;
function slide(){
if(!document.images)
return
document.images.az.src=eval("sekil"+addim+".src")
if(addim<5)
addim++
else
addim=1
setTimeout("slide()", 2500);
} slide();
</script>
</body>
</html>
View 4 Replies
View Related
May 8, 2006
i created a search for products on my site. and right now all the results have an image next to them to show the product. this creates some lag when theres tons of results because its loading all the images, so i was thinking is there a way i can use javascript to just show the image for each product when rolled over kinda like ask.com does?
im using php do echo the results like this:
while($row = mysql_fetch_array( $result )) {
$i += 1;
echo '<p>'.$i.") ";
echo '<img src="product_images/'.$row['product_id']._sm_.$row['product_image_sm'].'" height="37" width="37" />'
echo "<a href='product.php?pid=".$row['product_id']."'><b> ".$row['product_name']." </b></a><br>";
echo $row['product_description']."</p>";
}
but it looks like this once it hits the page:
<p>1) <img src="product_images/214_sm_19S.gif" height="37" width="37" />
<a href='product.php?pid=214'><b> Citrine and Diamond Pendant </b></a>
<br>This classic cit....</p>
(repeated numerously)
View 1 Replies
View Related
Mar 25, 2002
I know they are fairly basic, but i still tend to plump for a prewritten script. So, which is the best image changing script? I have used the DW in the past, but it is way too long for my liking.
I am looking for a script so that when you call the image change you haven't got to write 3 paragraphs of code (OK so an exaggeration...) to get the thing to switch then switch back.
I've got about 6/7 images that need changing on a mousover, and I am wondering who has the most efficien/effective code!?
View 1 Replies
View Related
Mar 12, 2010
I have two images, a before and after. I was hoping to rollover the "after shot" where a little button pops up in the center where you can click on "after" which swaps the "after" image with the "before" image. How to do this?
View 1 Replies
View Related
Apr 20, 2010
I essentially have this code below and what I am trying to do is change the image when the mouse rolls over it but change it back when the mouse leaves. What am I doing wrong?
HTML Code:
I have also tried assigning the id to the image and came up with this code but it still doesn't change anything. Just shows the original image.
HTML Code:
View 6 Replies
View Related
Apr 22, 2006
I want to create this..
A 2 col table with 3 rows down.
In the 1st col I want three thumb size images, 1 in each row
When an image is rolled on, the larger image shows up in col 2
In other words when a thumb is rolled on, its larger image is shown in another
area of the table.
Any help please?
Can do the replace small image with larger okay, but they are in the same position.
I am trying to duplicate something like this.. Code:
View 10 Replies
View Related
Jul 20, 2005
I'm having a bit of trouble with this script. I'm wondering if someone might help me. What I'm trying to do is to have a multiple image rollover whereby onmouseover, the image's source will cycle through a few pics and stop. I got this part to work fine--it's the onmouseout part that I'm having some difficulties with. I would like everything to be included within one function, instead of two (one for mouseover and one for mouseout). Here is what I have:
View 2 Replies
View Related
Apr 13, 2010
I wrote a couple of lines of code to simply fade in an image when a user rolls over a link:
[URL]
The only problem (which you probably already noticed) is that when you rollover the links quickly, the image appears below the other for a quick second until it completely fades away. I want each image to appear on top of each other when the user rolls over a link fairly fast, so it doesn't change the shape of the website like that. In other words it will look like they crossfade pretty much.
View 1 Replies
View Related
Aug 5, 2011
I have two images, one on top of another. I would like it so that if you mouse over the image on top (imgB), this image would resize and expand. I have tried playing with jQuery's animate() and height/width properties, but these just crop the image as oppose to resizing them.
<div id="imgA" style="background-image:url(aq.jpg); width:1000px; height:400px;">
<div id="imgB" style="background-image:url(wmc.png); width:200px; height:200px;"></div>
</div>
[code]....
View 1 Replies
View Related
Feb 15, 2010
This code works:
Code:
<html>
<script language="Javascript">
if (document.images) { [url].....
What happens: You see both image1 and image3, but when you mouse over either of them, nothing happens...So I'm trying to have "multiple images" rollover...
Edit: So by adding in the red, that's when all rollovers cease to function.
View 1 Replies
View Related
Mar 27, 2009
I got it working in FF but it won't hover in IE. Can it be done? [URL]
<input name="Submit" class="x" type="image" name="image7" id="image7" src="images/signup1.png" value="image" onClick="return CheckTheForm();" onMouseOver="image7.src='images/signup.png';" onmouseout="image7.src='images/signup1.png';">
View 2 Replies
View Related
Oct 28, 2011
I am trying to get the images on this page to revert back to the original photo after hover releases. I am assuming this is a simple fix, but I am no programmer and just did this in dreamweaver.[URL]
View 1 Replies
View Related
