I'm looking for a code (as simple as possible) for an image swap / replacement feature similar to these: [URL]Either is fine. One works w/ mouseover, the other works with a click.Dynamic Drive doesn't have one.
View 5 RepliesI've been working with HTML, CSS, and PHP for the past few years. I've decided to add some interactivity to my websites and one of the new courses requires JS in our implementations, so I figure why not.
Anyhow, more to the point...the topic is a bit vague, but I didn't want to put a 50 word topic either so bear with me as I try to explain :D :
Okay, so I'm designing an art portfolio page and I have a 250x250 pixels preview shot of an art piece on my side bar at the top. There is a horizontal column at the bottom of the page (before the footer) that contains about 6 to 8 mini thumbnails around 100x100 pixels. Right now, I am able to make it so that if I mouse over the bottom thumbnails, the 250x250 at the sidebar is replaced to reflect what was hovered at the bottom, only in a bigger size.
This is my current coding:
<script type="text/javascript">
<!--
function change_img(path) { document.large_img.src=path}
function preload(){
[Code]....
I'm not even sure if that's the correct or most efficient way to do it...it took me a while to figure out, and it finally worked so I went along with it.
What I want to do, and what I need help with is...I'd like to give the current artwork, or the piece that's currently @ 250x250 pixels at the sidebar a title. Preferably, perhaps from the context of the alt tag from an img src but not required. However, I would like for it to change to the corresponding pieces' title when I mouseover, so for example:
250x250 piece1's name is ...art1 and that name is located right under the image.
I mouse over the bottom thumbnails to the 5th thumbnail, the 250x250 piece1 is replaced and becomes 250x250 piece5. I'm trying to make it so that art1 becomes art5.
i am trying to get each imageloaded into div while mouse over but it does not work. jQuery is new for me what is wrong with jQery code i have no idea could you help please. here is the code.
[Code]...
Ever since I first used NS6, it has been buggy as hell when dealing with JavaScript image swaps/mouseovers. - The Images seem to dissapear for a second and then re-appear - something to do with NS6 having another DOM I think.
Even the V4.01 'patch' for DW4 from Macromedia doesn't seem to work for me.
Does anyone know of any rock-solid JavaScript MouseOver code, that'll work at least on IE5+ and NS6+ ??
I've been looking at all the various image replacement techniques..and they all seem unnecessarily complicated. I came up with:
function replaceLogo() {
document.getElementById('header').innerHTML = '<img src="/images/logo-tci.gif" />'
}
It's just replacing the layer contents at a very basic level.
This works just fine, I'm just wondering how well supported it would be across different browsers. Anyone know of a table of browsers that support innerHTML or see potential cross-browser issues with this technique?
I am using jquery in my current application to add min/max functionality, i.e, when the user close at maximize, table gets maximized, when clicked on minimize, table gets minimized. It works fine functionality wise, but, ideally, when maximized, max image should replace with min image and vice-versa, but images gets replaced only when clicked 2nd time around, for very first time, images don't get replaced, though the system works fine,
Here's how I am calling the function:
<a href="javascript:void(0);" onclick="showinghide('contacting')"><img src="images/arrows/opened.gif" id="contactingarrow" class="myarrows"></a>
Here's the function:
function showinghide(oobj){
if(oobj=="contacting"){
jQuery("#contacting").toggle('slow');
mycookies("contacting");
}
And the jquery code is:
function mycookies(myobbj) {
var mycookiesvar=myobbj+"cook";
if(jQuery.cookie(mycookiesvar)){
if(jQuery.cookie(mycookiesvar)==myobbj+"hide"){
jQuery.cookie(mycookiesvar,null);
jQuery.cookie(mycookiesvar,myobbj+"show",{expires:365});
jQuery("#"+myobbj+"arrow").attr({'src':'images/arrows/open_bk.gif'})
} else if(jQuery.cookie(mycookiesvar)==myobbj+"show"){
jQuery.cookie(mycookiesvar,null);
jQuery.cookie(mycookiesvar,myobbj+"hide",{expires:365});
jQuery("#"+myobbj+"arrow").attr({'src':'images/arrows/close_bk.gif'})
}} else {
jQuery.cookie(mycookiesvar,myobbj+"hide",{expires:365});
}}
I have a big image and several small thumbnails. Every time the user clicks on one of the thumbs, I want the big image to update. This is my code:
Code:
$("#thumbs a").click(function() {
var largePath = $(this).attr("href");
$("#largeImg").attr(src: largePath);
[code]....
Although, the thumb image gets always displayed in an empty window, as if there is no "return false". If I click Back in the browser, I see that the big image has been indeed changed just before the link executed. Why is my "return false" not firing and preventing the browser from following the link?
my understanding is that one of the great benefits of $(document).ready() is that it will execute code once the DOM is ready, yet prior to content being loaded.
For my example, with what I'm observing in Chrome (I'm on a MAC), I'd like to replace a default image with a different image, without seeing jQuery do the work. However, in Chrome, I see the original image for a brief instant before the jQuery replacement pops in. Why the flicker of the original image? Perhaps I'm not understanding the particulars of what is firing, and when its firing...
You can view online here, and refresh a few times to see the flicker in Chrome:
[Code]...
I have a photo gallery built with XML and PHP (pulling images from a client's Myspace albums).The gallery works fine, displays thumbnails and captions, paginates properly, etc.The whole thing is loaded by AJAX into a div, which complicates things a bit, but it works.When a visitor clicks a thumbnail, the full-sized image displays in a div overlay on top of the gallery div.The overlay is hidden until a thumbnail is clicked, when it is toggled to "visibility:visible". When the overlay "close" link is clicked, the overlay is hidden again.That also works. Some of the images are too large to display properly inside the div without throwing off the layout, so I had to set a max height and width.I can't just use CSS to set the dimensions or it'll size EVERY image to those dims, and the photos are all different sizes...some wider, some longer.So I used javascript to check the image size when the thumbnail is clicked.
All of that worked.(Although strangely, if I try to toggle the visibility as part of the function rather than putting it into the link, it doesn't work!)The problem is that once the dimensions of "img1" are set, they STAY that size even when the next thumbnail is clicked.So if the first image is 800px tall, the script crops it to 640px...then the next image may only be 400px pix tall but it displays as 640px high, making it distorted.I tried to add a "resetImgSize" function to the "close" link in the overlay, setting the img1 dimensions back to 2px x 2px when the overlay is closed, but the same thing happens...Once the img1 dimensions are set to 2x2px, they stay that way even when a new thumbnail is clicked.
I am a complete novice with Javascript, but am trying to work out how I can get a button to swap to another image when clicked, and each image have a different URL attached. I want to use this to toggle the bgcolor of my page using this script:
Code:
<script type="text/javascript">
<!--
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
[Code]...
We have a js heavy web-ui. In the production environment it runs minimized, composed from 10 or so js files. When we have a js-error of some sort (we have about 100 users and growing) we write the window.onerror information to a database. Only, it is not very helpful since linenumbers mean nothing in the intelligeble code.
Is there a minifier that tags the result that would allow translation of linenumbers? Is there some other method people use to solve this problem?
I have a iframe element which currently has a small amount of javascript that handles the scrolltop and I am trying to add a variable to that which controls the height of the iframe based on the source height. I do not want to set the height of the iframe in CSS because if I use this same method for other iframes and the source height is not the same it will not work.The page with the iframe is here (click on the link on the top of the page to load the iframe):
[URL]
The page I want to load into the iframe is here:
[URL]
The javascript and html for the parent page is:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
[code]...
Again, what I need is for the iframe to get the document height from the page that will load into the iframe and then have the iframe height be that exact size. As you can see once you click on the link it is much shorter than the page I am using to load into the iframe.I do not know javascript enough to figure it out and have spent a couple days looking all over the internet and have yet to find something I can incorporate into the javascript I already have.
I am trying to make a point and click javascript game. Basically what I want is to have one image displayed on screen at the start (room1.jpg). When you click on a door on that image, I have an onclick event to change the image to a new one that shows the door open (room1_a.jpg). What I want is that when you click the now open door, to display the next room in the game. The only solution I can think of is some sort of nested onclick event using several image maps, but I am fairly new to Javascript and I am not sure if that is possible. What it all comes down to is I want to display each incarnation of each room in the game in the same window without having to reload a new window for each room. I hope that makes sense, if not I can try and clarify. Below is the code I have so far. And as you can see all that does is display the open door when you click on the image. I have not done any of the image mapping yet.
[Code]...
I am trying to put together a purse shopping site - I would like to have the various views of the same purse in thumbnails under one image then when the customer clicks on the thumbnail the larger image will go into the viewing area. The general layout is like this page - [URL] So when someone clicks on the smallest image I would like it to replace the other image on the page and the larger image becomes the thumbnail. How is this accomplished?
View 2 Replies View RelatedI'm trying to use javascript to load an image on a webpage when another image is clicked on, just like an image gallery and just like this except I don't need any text: [URL] I copied the example above but when I click on the smaller image to load the larger one it works for a fraction of a second (I can see the image load in the right spot), but then the browser goes to the URL of the image instead (showing it on a blank page).
[Code]....
I'm failing to get a pure CSS way to achieve this, so trying JS. Several small images in a row, each different. Want mouseover to:
1. change each image to different image on mouseover (each image has its own mouseover image version).
2. produce different paragraph of text below row of images on each mouseover.
I can achieve it with mouseover on text links or on an image, but not with the two events, viz mouseover image swap + mouseover text swap. Would also want to be able to style the text.
I have four links that use graphics to create an unvisited and visited state (using CSS). The link actually changes a section of text elsewhere on that page, so the user doesn't leave the page. The clicked, visited graphic reflects what text you are reading. You can then select a different link, and new text reflects the link you clicked on. What goes wrong is that if you click all four links, you eventually get all four visited graphics showing.
What I want is this. You click on the graphic and the graphic changes to visited. You then select a different link and that state goes to visited but the previous link that is visited too, changes back to unvisited. Therefore when you click on any link, that visited state is shown, and all others always reset to unvisited. The results is that the visited graphic reflects the current text on that page.
I am looking to find a javascript that image swaps 4 button images that are to be used as links.
There will be an unvisited button (color of my choice)
There will be a hover state which Is green.
There will be a visited link button that is purple.
There will be a currently active page button that will be red.
I have a script that works for 3 of the for states.
The script that I have also will not keep the purple, visited state, as standard text based links will when a page has allready been visited.
Does anyone have a script that will work for what I want to do for all states.
I don't know how to build a script of my own, but plan on learning.
Does anyone have a script that will work for what I want to do for all 4 link/swap states that I want incorporated?
capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript
<html>
<head>
<script language = "Javascript">
function ChangeDefault(src)
{
//document.frmMain.DefaultImage.src = src <--Doesn't work at all
alert(src) //<---Displays the entire file path, want just file name
[Code]...
Lets say I have two images in a box
<body>
<div id="box">
<img src="image1.jpg" id="image1" width="100" height="100" />
<img src="image2.jpg" id="image2" width="100" height="100" />
</div>
</body>
When I click on Image1 I want Image2 to get replaced with a new image, called Image3. So I tried this code:
[Code]...
But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load.
I tried a Javascript on my homepage that works fine on Netscape, works
nearlyx normal on Opera but does not work at all on Internet Explorer. Is
there anybody out there who can help? I use a frameset of 3 frames. One of
these Frames has thumbnails with the javascript code for the image-swap -
the big picture should change whenever someone clicks on the corresponding
thumb. Code:
I'm looking for a solution that can be used in a calendar/gig guide
scenario where each day is represented by a dot image. Now this dot must
do the following
1. When the mouse goes over the dot image it swaps to the mouseover dot
2. When the mouse goes out of the dot image it restores back to the
original img
3. When the img is clicked the dot image is swapped with another image
(different to the other 2) that will remain there even when the mouse
goes out of the image
I have a portfolio page which loads a dozen thumbnails and one large image.
A friend helped me code a script (below) which will swap out the large image
(named "imgLarg") when a different thumbnail is clicked. Both the thumbnail
and the enlargement are identically named, one is in /thumbs/ and one is in
/enlargements/ - tricky, huh? ;-) What's the easiest way to make this work
in other browsers as well?
<script language="JavaScript">
function enlarge() {
oSrcElem = event.srcElement;
imgLarge.src = oSrcElem.src.replace(/thumbs/,'images');
}
</script>
Below is the routine I am using that when invoked swaps images for other images:
<script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
[code]....
But one of the images I would like to vanish (using the empty spacer.gif) has a border:
<img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left">
It must have this black border, but when it gets swapped for a blank, I am left with the black square. how to vanish the border along with the graphic?(I have some vague idea that "border" is not used any more, but anyway...).
how to veiw this eval's out put?
function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
<?php
// to change the image size within the web page
function imageResize($width, $height, $target) {
//takes the larger size of the width and height and applies the formula accordingly...
//this is so this script will work dynamically with any size image
[Code]....
Just want to swap an image (thumb) for a larger one - in the same spot - then click on the large image and go back to the small one.
Nothing I have tried works but I KNOW it can be done - can't it?