Linking And The Phatfusion Image Menu

Apr 2, 2008

I am currently in Web Design I class. I do not yet know javascript. However, I am currently making a music page and I am using the Phatfusion Image Menu as my navigation. What the Image Menu does is it cascades and expands when moused over, revealing an image, which can be a link. When clicked, the image stays in it's expanded form so that the user can see which page he/she is currently on. The problem is that I can get the menu to work correctly and open a new window, but that is not what I want it to do. What I want is for the menu to stay expanded (without refreshing) when an image (link) is clicked, but I want the rest of the page to change.

I believe that the problem is in the javascript: I don't know how to code in javascript well.

Here is the section I am currently looking at.

Code:

Right now, alert makes a javascript alert telling the user the link. If I change alert to open, it opens the link in a new window. How do I get a new page to load without reloading the menu? I want the page to load behind the menu.

The links I am using are here:

Code:

This is the main javascript code if it is needed.

Code:

Licence: Open Source MIT Licence

View 2 Replies


ADVERTISEMENT

Conflicting Effects MooTools Phatfusion Menu And Quote Rotator

Nov 30, 2009

I'm trying to put a rotating testimonial effect in the header (working) and use a Phatfusion style image menu (not working). I know the menu uses MooTools and the other a google script?Honestly, I've been going at this for a while and don't know that I know enough about javascript yet to understand what to do...

View 4 Replies View Related

Linking Drop-down Menu To Iframe

Oct 16, 2005

I have an HTML doc. with 3 layers (<span>). The first span contains a banner. The 2nd span contains the javascript code for navigational drop-down menus. The 3rd span contains an iframe for the content.

My problem is that I can't get the content to appear in the iframe from the links off the drop down menus.

View 6 Replies View Related

JQuery :: Googlemaps: Sidebar: Linking Externally To Menu Items?

Oct 24, 2010

Another quick question re. the JQuery sidebar I have on my Google map. I would like to link to individual markers from different websites or via email, so would like to convert for example, the 'javascript:myclick(7)' link on the menu to an external URL that will click to the marker and info box containing the video. Is this possible?I have tried something like [URL].. but that doesn't seem to work. Does someone know of anotherwayto do this?[URL]...

View 4 Replies View Related

Working With Image Coordinates And Dynamic Linking.

Jul 23, 2005

I have a page with a large centre-aligned image on it. I want a
functionality whereby users can click their mouse on any point in this
image and it would then show a virtual mouse pointer at the place where
they clicked it. If they were to click somewhere else, the position of
the virtual cursor would change.

The position of the cursor needs to dynamically generate a link and
display it in a form field text edit box.

If that link is then viewed separately, it would launch the same page
with the virtual mouse pointer at the location where the original
person placed it.

Basically I want to be able to have one guy point to a location on the
image for the benefit of another guy, but graphically as opposed to
relying on written explanation.

View 1 Replies View Related

Jquery :: Slideshow Breaks When Linking Image In DIV Set?

Aug 13, 2011

Below is a very simple jquery slideshow script which functions exactly as it should. But, if I link an image in the DIV set (See proposed change section) the slideshow breaks, instead of cycling through each image in turn it keeps trying to cycle the first image over and over. Script linking in header of HTML page:

<script type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="script/slideshowsc.js"></script>
CSS on HTML controlling DIV position/opacity

#slideshow {
position:relative;
height:186px;
}
#slideshow IMG {
position:absolute;
top:0;
left:20px;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

DIV setup in HTML page
<div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
<img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" />
<img src="images/did-u-know2.png" width="499" height="186" />
<img src="images/did-u-know3.png" width="499" height="186" />
</div>

Proposed Changi in DIV Code here
<div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
<a href="whatever.html><img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" border="0" /></a>
<img src="images/did-u-know2.png" width="499" height="186" />
<img src="images/did-u-know3.png" width="499" height="186" />
</div>

Finally, Javascript / Jquery fired through body tag onload
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );

$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 8000 );
});

View 1 Replies View Related

Linking To An Image In An Array On An External Page?

Sep 5, 2011

I have put together an image gallery that contains links to each individual image, however, I would like to link to individual images on a separate html document and cannot for the life of me determine how to go about doing this.
rnmix

Code:
<html>
<head>
<script type="text/javascript">

[Code]....

View 1 Replies View Related

JQuery :: Galleriffic - Linking Directly To Image In Gallery

Sep 30, 2011

I'm working on a gallery site using galleriffic. It is composed of 13 seperate galleries (couldn't figure out a way to integrate them into one) and what I would like is an index page which users can jump to any specific image in a gallery. [URL]. There is a current example, and what I'm trying to do is make a drop down menu form where someone could select a piece of granite, (eg. Giallo Latina) and it would jump them straight to that page. However if I link to "butterscotch.html#5" it doesn't work. Is there any way of creating a drop down menu that could handle this?

View 2 Replies View Related

JS Code: Linking Webpages With Different Shown Image (onclick)?

May 31, 2010

This is what I am seeking: On the main page we have 3 different images (img1, img2, img3), that must link to another page (photo page) with a photo in the middle enlarged: for example if I click img1 i will go to the photo page with img1 enlarged in the middle, and if I click img2 will go to the photo page with img2 in the middle. the photo page has photo thumbnail sliding at the bottom of the page that links to the same middle enlarged photo based on the clicked photo. is it doable with JS? or should I look somewhere else?

View 1 Replies View Related

Drop Down Menu - Over The Sub Menu The Background Image Of The Top Item Disappears

Feb 11, 2011

I'm building a drop down menu like [URL] or [URL] or [URL] the effect I'm trying to achieve is to have the top menu item showing a background image via css and create a stylized design with the sub-menu. Using CSS when I hover over the sub menu the background image of the top item disappears. So I'd like some guidance with javascript on how to keep the back-image while hovering on the sub menu.

View 1 Replies View Related

JQuery :: Kwicks: Change Opacity To A Inactive Image On A Accordion Image Menu?

Sep 5, 2010

I'm building a website with a image menu like accordion, using jquery+easing+kwicks [URL]ith CSS, I can change the opacity of the element hovered (the opened kwick), but I'm looking to someway to change the opacity of the inactive kwicks (the images that close when you open a hovered image).I tried to do it with css, or hacking kwicks plugin, but I couldn't make it.

View 3 Replies View Related

Changing Menu Image

Aug 15, 2005

I'm trying to create a javaxcript application that changes a image menu
by following the mouse, something like:

<!-- menu images are m1, m2, m3.gif-->
<script language="JavaScript">
function option1()
{ document.getElementById("menu").write("<img src=m1.gif>"); }
function option2()
{ document.getElementById("menu").write("<img src=m2.gif>"); }
....</script>

<div id="menu">
<OBJECT data="m1.gif" type="image/gif" usemap="#map1" border=0>
<MAP name="map1">
<AREA HREF="#/" COORDS="0,0,50,14" onMouseOver="Option1()">
<AREA HREF="#/" COORDS="50,0,100,14" onMouseOver="Option2()">
....
</MAP></OBJECT>
</div>

View 3 Replies View Related

Drop Down Image Menu

Mar 15, 2002

Can someone direct me as to create a basic javascript drop down menu that once you click one of the links an image and text appear under it.

View 13 Replies View Related

Hiding A Sub Menu And The Rolling Over An Image?

May 19, 2009

I am looking for a way of hiding a submenu and the rolling over an image which is the menu item. It will trigger the submenu to slide down. It needs to be hidden to start and visible when the user rolls over the image. I have tried numerous scripts. All seem to have one bug or another.

View 1 Replies View Related

Vertical Image Menu To 100% Heigh?

Aug 26, 2009

If you look at this test page (http:[url]....), you see a vertical image menu. This menu is originally from http:[url]....But... how can you get it to 100% heigh?

View 5 Replies View Related

Drop-down Menu On Clicking An Image?

Dec 5, 2010

I need a drop down menu to appear when I left-click an image.... have tried a lot but failed...

View 9 Replies View Related

DropDown Menu With Image Popups

Aug 5, 2011

I'd like to have a drop down menu that pops up a small new window with an image. So for, every attempt results in the image appearing in a new tab instead of a small, pop up style window.

Here's my form
<select name="parms">
<option value="AirTemp.jpg">AirTemp</option>
<option value="Humidity.jpg">Humidity</option>
<option value="Windspeed.jpg">Wind Speed</option>
</select>

View 2 Replies View Related

DropDown Menu To Appear Above Image Slider?

Oct 23, 2011

I have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it? [URL]

View 1 Replies View Related

Slide Menu JS And CSS - Image Rollover

Mar 7, 2006

Its cool but would like to have image rollovers instead of the text shown in the example.

I can't figure out how to do it without screwing up the slide bar on the bottom. And the css file won't let me specify which link like... a.home li {etc etc etc....I would really like to be able to have a separate rollover image for each link and have the slide bar work still.

View 2 Replies View Related

Menu Image Dependant On Page?

Aug 5, 2009

I have a menu on a new website im developing. The menu is going to be within a PHP include file. I need a way of (using JS) the current page having its menu item with a different image to the others e.g. a "selected" image.The code im experimenting with, and which may shed a bit more light on what im trying to achieve is as follows:

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if (filename = 'about.php')

[code]....

View 2 Replies View Related

JQuery :: Navigation Menu - Image Fly Over Top On Hover

Jan 14, 2012

I have a navigation menu. Right now, when you hover over a menu item an image flies over the top of it. This image is set in my CSS as "nav li em". However, that image flies in to the same spot for every menu item. This is what I would like: When you hover over Item 2, em2 is invoked for the FlyIn. When you hover over Item 3, em3 is invoked.

Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]" xml:lang="en" lang="en">
<head>
<title>help</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hover(function () {
$(this).find("em").animate({ opacity: "show", top: "-34"}, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText); .....

View 4 Replies View Related

JQuery :: Accordion Menu - Image On Same Page ?

Oct 2, 2010

Im using an accordion menu. i would like to have the sub-menu items in that accordion menu when clicked on display an image in a "viewing box" of some sort beside it.

View 1 Replies View Related

Change Bg Image When Toggling An Accordion Menu?

May 7, 2009

I have an ccordion menu, and each menu header has a little arrow img that changes when the menu slides down and up. The arrow img is a background image that is added to the detailsPanel div.This is the code so far:

Code:

$(document).ready(function() {
$("div.menu_body").hide();
$("#menuheader div.menu_head div.detailsPanel").toggle(function() {

[code]....

This works fine when I toggle one menu item at a time.But say I expand one menu item, and then click on another menu header. What happens is that the first menu item slides up and the newly clicked slides down, just like expected. But the arrow doesn't change back on the menu that slides up. This happens because it's toggle function is still in the first state, and if I click on it again, thus removing the "detailsPanelSelected" class, all that happens is that the image changes back. Looking at the code, this is expected.how do I make it so that a menu items "detailsPanelSelected" is removed when another menu header is clicked? Can I somehow reset the pending toggle function?

View 1 Replies View Related

JQuery :: Navigation Menu To Show An Image?

Nov 29, 2011

I'm trying to include a navigation menu where the viewer hovers over the link such as Main or Home and somewhere else in the page it display an image.

Similar to this : [URL]

But instead of pixels, I would just like images to be displayed.

View 2 Replies View Related

Drop Down Menu And Image Change On Mouseover?

Jun 3, 2007

I'm looking to take some images, and then once a mouse over a drop down menu appears, and it also changes the image of the button. Anyone know of a way to do this?

View 4 Replies View Related

DropDown Menu Appearing In Different Region Of Image Map

Mar 30, 2010

I have been searching and searching but cannot find the type of drop down that I am looking for. I would like to see a menu appear when I pass the mouse over a region of my image, different menus would appear in different regions of my image map.

View 3 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved