I am looking for a script that will enable me to replace images in my site onMouseOver. the images are inserted in the HTML page using the <img> tag.
View 7 Replies
I'm having problems with my script I wanted to change my script into a loop, but I can't seem to make it work
Here is the sample: [url]
I wanted to make it loop from image 1 to image 7 when the mouse pointer is on the image. So basically your mouse pointer goes in and out.
I've been advised that the only way to accomplish this is via some hand-coded javascript, at which I'm a complete noob, so hopefully someone here might be able to steer me in the right direction.I have a listings page which displays results using images and text which are stored in a MySQL database, all is working fine. The images are pulled into the page from the database and each listing can have up to a maximum of 10 images. Some will have all 10, some probably one or two, so the page is coded such that if there's an image in the field, it displays a thumbnail, if there isn't then it shoves a " " in instead.The results page has one main photo (image 1) and then a series of thumbnails (images 2-10) below it and I need to be able to set this up so that when someone clicks on image 2 it shows the full-size version of that image in the div where image1 sits, and the same for however many remaining images there are.
So my question is, how easy it is to do this with javascript and does anyone have any idea how to code it?The main photo sits in a div whose id is "mainphoto" the remainder all sit in a div whose id is "thumbpix".
I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can. Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click.
I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way). The best example I can share is this: http://j.mp/5U79i1 What he is using is flash based (slideshowpro director and slideshow pro for flash). Not interested in flash for this personal project.
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 RelatedBefore, 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]....
What I would like to do is enable swapping between the black images? I would like to drag and drop to another image and that image will fill up the dragged earlier image position?
View 1 Replies View RelatedWhat I would like to do is enable swapping between the black images? I would like to drag and drop to another image and that image will fill up the dragged earlier image position?
View 2 Replies View Relatedif there's some effect in JQ that we can use to simulate rollover. Usually when user hovers a mouse over a link/image it changes its src/ background to another one (for example arrow.png -> arrow_o.png). So users feels like it is highlighted or similar. But we always must have 2 images (similar ones). Maybe there's some effect that can simulate this highligting/hover for user so we don't need to have 2 images. I understand it will never be as good as alternative image, but still.
View 12 Replies View RelatedI'm using Jquery to create a rollover effect on 2 images (placed on top of each other) to fade the bottom image in on a mouseover and out on a mouse out. Clicking the faded in image also opens a fancybox gallery. The problem is that sometimes the animation (the fade in and out) gets stuck after closing the fancybox window and the mouseover doesn't work anymore.
Here's my code for the mouseover:
I have the followingcode linesin myJavaScriptcode:var colors = ["#F08", "#0B8", "#04F", "#FD0", "#808", "#F20"];This sets the bg colors of my divs. This var is only used here:
function activateItems(callback) {
var itemsActivated = false;
for (var i=0;i<cfg.rows;++i) for (var j=0; j<cfg.cols; ++j) {
[code]....
I just created a new page topper for my website, and am new to javascript. I spent HOURS on designing all of the mouseover images that are on my website now, except there are spaces in between all of the images and I designed them to touch.I've tried everything in the code to get these images to touch.
View 2 Replies View RelatedI have some rollover images on my website, and they don't switch until the page is finished loading.Is this standard? Is there a way to have the rollovers work when the page is still in the process of loading all the images?
View 2 Replies View RelatedI am trying to create a rollover on a stock index graph when I rollover one of three geographic areas (Americas, Asia, Europe) on a separate image . So far I have been only able to create the rollover for the separate countries, without the second image.
View 7 Replies View RelatedI am trying to rotate 3 images continuously when onmouseover, currently I have a code but this code doesn't rotate continuously and only use 2 images.
<SCRIPT LANGUAGE="JavaScript">
loadImage1 = new Image();
loadImage1.src = "http://site.com/secondimage.jpg";[code].....
I have a nice little script that changes a company's logo (displayed in a side bar) when the user mouses over a part of an image map.
Here is the basic code:
My question is, how can I get three different images (company logo, weekly price chart and monthly price chart - all of which are in an image folder on my server) to change on this one mouseover event. I tried replicating the function three times and altering each function's name but that ended up screwing the whole thing up.
I have coded my navigation bar so when you mouseover a button (about us- for example), it displays a sub menu using images below using a simple multiple image swap. When I mouseover another main button, the first ones are replaced with the new sub menu items-images.
All works fine, however, I cannot figure out a way to code into the existing script to assign and make hyperlinks associated with the sub menu buttons change as well. Here's my web page: [URL]
I have just the main nav button links contractor and freelancer activated right now. Here's the code below (using MM_swapImage):
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
[Code].....
I've been looking now for over a week on how create this [URL] effect when you hover over the ships on that page.
View 7 Replies View RelatedI 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 RelatedAll I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that.
What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones.
It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them.
I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images.
I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image.
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.
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]....
I've been researching a good effective way to do 3 state image rollovers with jQuery, but haven't found anything that's workable with an AJAX style page. The page consists of a ul based menu that shows and hides new content depending on the selection. What I'm attempting to achieve is once the image has been clicked on, for the "over" state to remain until a new choice is made from that menu, aka another image has been clicked on. Once another image was clicked on, it would then display the active state and the previous would not.
Here is the HTML:
<ul id="navWork">
<li onclick="javascript:doShowHide('spotsPromos');">
<a href="javascript://">
<img src="images/nav-spots-promos.png" alt="Spots and Promos" />
</a>
</li>
<li onclick="javascript:doShowHide('corporate');">
<a href="javascript://">
<img src="images/nav-corporate.png" alt="Corporate" />
</a>
</li>
</ul>
Here is the JavaScript that is activating the rollovers:
$(document).ready(function() {
// preload all rollovers
$("#navWork img").each(function() {
// Set the original src
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.png$/ig,"-over.png");
$("<img>").attr("src", rollON);
});
// navigation rollovers
$("#navWork a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/-over/);
// fon't do the rollover if state is already ON
if (!matches) {
imgsrcON = imgsrc.replace(/.png$/ig,"-over.png"); // strip off extension
$(this).children("img").attr("src", imgsrcON);
}});
$("#navWork a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});});
i have two images which are part of a rollover button that i want to have paused until the intro animation finishes. I have the javascript code but the rollover images are specified in the css. I just have the id to them in the html. I was wondering if anyone knew how to include the rollover files with the pausing javascript code. the files are profile.gif and profileover.gif. I tried to add the files to the preload part of the javascript but that didn't work.
View 2 Replies View Relatedi have two images which are part of a rollover button that i want to have paused until the intro animation finishes. I have the javascript code but the rollover images are specified in the css. I just have the id to them in the html. I was wondering if anyone knew how to include the rollover files with the pausing javascript code. the files are profile.gif and profileover.gif. I tried to add the files to the preload part of the javascript but that didn't work. The website is [URL]...
View 8 Replies View RelatedA site redesign I am working on has some fancy JavaScript requirements that are above my abilities. I usually find an appropriate script for the job from the internet, but with this particular problem I am having no such luck.
What's required is that when a user mouses over on a menu item, lets say the button 'About Us', three things happen:
1. The button 'about-us.gif' changes to 'about-over-over.gif'
2. An image in the body of the page changes from 'summary.png' to 'summary-about-us.png'
3. A text based sub menu appears in the body of the page.
See code:
