|
JavaScript - Switching Banner With Image Click Issue
I have a banner that has image navigation on the lower right. The navigation links are images which, when clicked, change the banner without reloading the page. The actual switching of the banner is working when each image is clicked.
However, my problem is this: The page itself is long and must be vertically-scrolled to see the entire content. Because of the scrolling, the banner could appear anywhere vertically on the page. And whenever I click the banner navigation hrefs, the page "jumps" so that the banner is at the top. The page should really stay in the fixed position. I'm not sure how to set it up so that no matter where the banner section is on the scrolled page, that the page stays in the same position when the navigation is clicked. My href's in that navigation are set up as : <a href="#"></a> Do I need something in my script so that the page won't jump? Or am I missing something in the HTML? Similar TutorialsHi everyone. I am running a short url service with payment... So now we have 1 full ad advertising and banner advertising. On Full ad page For users to skip the full ad page they must click on the banner on the header so then go main link. <a href="{$_WEB_URL}"> is the link on the database tat it has been shortened. So when guests click on the banner the banner opens in new window but the page does not start to forward to main url. Can some one help me on this ..? I tried this : <div class="lb_ad"> <a href="{$_WEB_URL}"> <div onclick="redir()"> <!-- START all AdPeeps.com Code --> <p align="center"> <script type="text/javascript" src="http://paytox.us/advertises/adpeeps.php?bfunction=showad&uid=100000&bmode=off&gpos=center&gwidth=90&bzone=de fault&bsize=all&btype=3&bpos=default&ver=2.0&btotal=1&brel="nofollow" target=_blank&bbo rder=0"> </script> <noscript> <a href="http://paytox.us/advertises/adpeeps.php?bfunction=clickad&uid=100000&bmode=off&bzone=default&bsize=all&btype =1&bpos=default&ver=2.0" rel="nofollow" target="_blank"> <img src="http://paytox.us/advertises/adpeeps.php?bfunction=showad&uid=100000&bmode=off&bzone=default&bsize=all&btype= 1&bpos=default&ver=2.0" alt="Click Here!" title="Click Here!" border="0" /></a> </noscript> </p> <!-- END AdPeeps.com Code --> </div> </a> </div> As a newbie, I've been combining scripts and adjusting them to create a page that allows viewers to choose from different visual elements of a leaf that will be used to search a database. There are rollovers for each anchor dropdown, and a center image that is in layers to "assemble" the leaf. But I've run into a logistical nightmare and I'm not sure which is the best way to handle this. if variations were slight, i would have no problem. But to show some characteristics I need to know what one or two underlying images were as well. In other words, if I am choosing borders, and I have a round image. The border would have to know to put a round scalloped border - not a square one. (And if somebody goes back to change the shape, I would need the border to automatically know to change to a square scalloped border) Can I build conditionals within the layers? Or does it need to be inline with the image? is there another way to do this before my script becomes a disaster when I try to accommodate for numerous variations. Can I get a snippet or two of code to send me in the right direction? maybe there's some precreated script for this? (I can dream!) I hope that makes some sense. Here's the page that I'm working on. http://www.mergecreate.com/test25n.html I want to create the form button similar to this: http://www.customusb.com/quoteform-wref-flashdrives.php Im a designer and i m a total noob in javascript, would appreciate very much if you could be patient with me.... i use an OnClick to switch the image but the if else statement just doent let me switch back to the original image, i not sure where i have gone wrong... appreciate again if anyone could help me out... below are the html and js thumnails: http://img215.imageshack.us/f/73258715.jpg/ http://img35.imageshack.us/f/44225148.jpg/ I have a site where i switch between two images using some JavaScript. What I need is to be able to set a session variable or something so that if someone selects shading on or off it sticks to that for the rest of the session. Any idea or even a point in the right direction. Do i need cookies or is there a simple way to do this http://www.tech4t.co.uk/territorymapping/pentagon/ Hi, I looked around to see javascript codes on websites but had no luck in finding what I wanted... or I just don't know how to work with it I want to switch/replace image with other images by clicking on radio buttons. i have the html, but how can I make this work??? can anyone help me out? Code: <body> <p><img name="main" src="black.jpg" width="100" height="100" alt=""></p> <p> <input type="radio" name="red" id="radio" value="radio" onClick="display red in main image"> </p> <p> <input type="radio" name="blue" id="radio2" value="radio" onClick="display blue in main image"> </p> <p> <input type="radio" name="green" id="radio3" value="radio" onClick="display green in main image"> </p> <p> <input type="radio" name="yellow" id="radio4" value="radio" onClick="display yellow in main image"> </p> <p> <input type="radio" name="black" id="radio5" value="radio" onClick="this would this play the main image 'black'.jpg"> </p> </body> thanks for any help in advance! Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser I'm having the same trouble with adding an ALT tag to the last image: var imageList = [ "images/banner/banner1.jpg", "images/banner/banner2.jpg", "images/banner/banner3.jpg", "images/banner/banner4.jpg", "images/banner/banner4.jpg", ]; Can anyone help? -edit - nevermind. mods plz delete.
Hi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! What is the correct code to make a sound play every time you click a certain image? All the codes I've found online aren't working, or I'm not inputting something correctly..
I'm sure this question has been asked, but I tried searching for this answer using many different keywords, but I don't know the correct terminology for my question, as the search results turn up other topics. I'm wondering if there's simple code for clicking on a thumbnail to have a larger version of the picture appear above, but still within, the same webpage, and the background darkens a little. The larger picture has a "close" button, which you click to get back to the underlying original page. An very simple example of the type I'm looking for is he http://www.salon.com/comics/tomo/200...omo/index.html I'm assuming this is a java script that does this. I'm using DreamWeaver. Does Adobe have this type of coding in their "Spry" coding? If not, is there a simple template of the code out there? Thank you for any help. I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript? Thanks in advance. Hi, I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file). I assume this would use the onclick event. Can anyone help? Overlapping Image Viewer Script http://www.javascriptkit.com/script/...geviewer.shtml It works perfectly. Just as advertised. It currently changes the images with the mouse over and out effect. But I would like to change it so that the visitor must click on the thumbnail image to enlarge it and to click on the enlarged image to send it back to thumbnail size. It would also be helpful to have the enlarged image appear about 25 px below the top of the thumbnail while remaining flush with the left side. Thank you for your time .... viki barefoot hi master. I need some help. I need a function that change multiple images on click maybe by id Ex.: PHP Code: <table> ..... <td><img src="folder1/image1.jpg"></td> <td><img src="folder1/image2.jpg"></td> <td><img src="folder1/image3.jpg"></td> <td><img src="folder2/image1.jpg"></td> <td><img src="folder2/image2.jpg"></td> <td><img src="folder2/image3.jpg"></td> ..... </table> NOW BUTTONS (IMAGES) PHP Code: <!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> <!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> <div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> really, I don't know much about javascript, I'm waiting for your help. actually, I have loaded jquery-1.2.6.min.js Hello everyone So I'm new and I have searched but I still got two questions. I'm gonna use the backbox scrip on my site and of course I got it from javascriptkit.com but - I would like to close the image not only by clicking outside of box or at the Close-button - but also by clicking the image itself. The orignal script works really well - except for one small thing - when the backbox displays large images - I can't close them by clicking outside the image on the left and right sides - it only works closing when I click above or under the box. Anyway; internet gave me this small code: Code: objLightbox.onclick = function(e) { // close Lightbox is user clicks shadow overlay
if (!e) var e = window.event;
var clickObj = Event.element(e).id;
if ( !/(prevLink)|(nextLink)/.test(clickObj) ) {
myLightbox.end();
}
};
And I was wondering if you guys know where to put it in the lightbox.jg file for it to work (or if it even will work at all?) - Or maybe I can change the original code for this to happen (Without adding this new code?) Me then - I have notepad + + and I just recently learned CSS - Java is a tad more complicated when I look at the code The last question I have is if you guys got any good site for me to read and learn Java? Like I need to understand the logic behind it - how it thinks. I just learned how CSS "thinks and acts" a few months ago - but I guess Java isn't anything like that. Regards Fredrik I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window. Pathetic sitelock.com will offer no support in getting this in a popup window. I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else. My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want. Here is the code that sitelock.com gave me: <a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a> Any help is appreciated I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image. I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click". The only code sources i have found will swap images in the same table area and not to any image existing in the entire document. thanx Hi. I am trying to make one small modification to a website. I just want to make an image that, when clicked, scrolls to a certain point. Pleeeeeeaaaaaase help! This is the javascript that I think controls the scrolling: var element_y; var swiffy; var cur_groupid; var group_sortable = new Array(); var lightbox; var content; window.addEvent('load', function() { checkScrollerWidth(); checkImages(); }); function checkImages() { var check_w = window.getSize().x + 500; var winh = window.getSize().y; var divs = $$('.single_image_holder'); for(var i=0; i<divs.length; i++) { if(divs[i].getChildren().length) continue; if((parseInt($('main_images').getPosition().x) + parseInt(divs[i].get('xpos'))) >= check_w) return; var img = new Element('img', { 'src': divs[i].get('source') }); divs[i].adopt(img); } } window.addEvent('resize', function(){ checkScrollerWidth(); }); function checkScrollerWidth() { if($('scrollbar2') && $('content2') && $('handle2')) makeScrollbar( $('content2'), $('main_images'), $('scrollbar2'), $('handle2'), true); } function makeScrollbar(content,checkContent,scrollbar,handle,horizontal,ignoreMouse){ if(checkContent.getScrollSize().x < scrollbar.getSize().x) { handle.setStyle('display','none'); return; } handle.setStyle('display','block'); var steps = (horizontal?(content.getScrollSize().x - content.getSize().x)content.getScrollSize().y - content.getSize().y)) var slider = new Slider(scrollbar, handle, { steps: steps, mode: (horizontal?'horizontal':'vertical'), onChange: function(step){ var x = (horizontal?step:0); var y = (horizontal?0:step); content.scrollTo(x,y); checkImages(); } }).set(230); if( !(ignoreMouse) ){ $$(content, scrollbar).addEvent('mousewheel', function(e){ e = new Event(e).stop(); var step = slider.step - e.wheel * 30; slider.set(step); }); } } |
|||||||