Swapping Images For A Tab Style Interface (within Same Page)?
Feb 5, 2009
working on a feature that displays 3 news stories. The stories are accessed by 3 buttons on the top, sort of like a tab-style navigation. The catch is that all 3 stories are on the same html page, the "navigation" is just showing/hiding content based on Java, CSS & div's. Where I'm stuck is creating On/Off state for the tab buttons. What I'd like to do is:
Naturally I have separate version of each button for the on/off state, I'm just not sure how to initiate the swap...Do I set a JS variable on the onclick? Or is it just a function?
I know this is sorta reposting but I want to simplify the issue a bit. Take the following script:
function replacemain(s){ var x = document.images['MainImage']; var y = document.images[s]; var pictemp = x.src; x.src = y.src; y.src = pictemp; }
All I want to do is replace the image specified as "s" with the MainImage. Actually swap them so that each execution of the function will swapp and reswap the images without loosing anything. This generally works, however, on a couple IE6 browsers it causes blank images to swap in....
I've got a JavaScript / CSS question if anyone has a spare minute and the interest? I've got a page with a background image set by CSS. I want to use a Javascript function to change that image with a link click. Here's a snippet from my HTML:
HTML Code: <body> <script type="text/javascript" src="changeBGimage.js"></script> <style type="text/css"> body {background: url('red.jpg') no-repeat} </style>
[Code]...
Would you be able to tell me how I would structure that function?
I need to create a page containing five image tags, two buttons, a <select> and a <textarea>. The images tags will each contain a picture of one of six possible outcomes for the dice portraying the numbers one through six..
The first button: When the user clicks on the button, all dice are rolled once. For each die when rolled, the src of its image tag is replaced with a random one of six possible pictures -- each picture being chosen with equal probability (1/6).... I HAVE THIS DONE
The select: The user may select any of the numbers one through six. Whenever a picture is clicked upon, then that die takes on the value shown inside the <select> THIS IS WHAT I NEED HELP WITH
The textarea: Results of the dice rolls should be kept as a running log (a cumulative history) in a textarea at the bottom of the page. With each roll (initiated by the click of the button), we should be able to see the complete history of all current and previous dice rolls. You need not consider changes brought about clicks on individual dice in conjunction with the <select>....I HAVE THIS DONE
The second button: A button below the textarea, should allow the user to obtain a report (overwriting the current contents of the log in the textarea) which tabulates the frequency of each of the six outcomes plotted separately for each of the dice. The frequency tabulation should show how often each die was rolled, as consistent with the data stored in the log..
I have an image inside of a div that I'd like to swap every time the function is triggered. I was able to attach first image through this: Code JavaScript: this.titlecontainer.appendChild(document.createElement('img')).src = 'images/picture' + padded_index + '-t.png';
This indeed does add another image on each function iteration but as the code suggests, it actually APPENDS additional images. Instead, I'd like to SWAP the existing image for a new one. My guess is to remove what's currently loaded inside the div prior to appending another one. What would the line preceding the above have to look like to accomplish removing of the content?
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?
I've run into a problem with swapping images for site navigation.The "hover" part works just fine, but the problem lies within the click part. When the user clicks the first thing that happens is to reset all of the images for all of the links, and then set the hover image for the link that was clicked. However it seems that after resetting all of the images 'src' attributes, the code for setting the link that was clicked either doesn't execute, or executes before the reset.
Newbie here. I am seeking to swap out three images when rolling over one. Cursor hovers over one image - three new images, in different locations, are seen on screen. When cursor moves away - the images revert to "normal" state.
Image 1 - thumbnail - bottom right of screen When rolling over Image 1, three images change: Image 1 - to shaded version of the thumbnail Image 2 - main image center of screen Image 3 - text box image top right of screen
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?
I am trying to create a menu that would look and act like this image illustrates: [URL] Essentially the three boxes slide down when rolled over and menu items appear in the portion that has slid down.So far, I have figured out how to make an image slide using jQuery: [URL]
Would I use php or javascript to make an admin interface so someone can update the web page I made for them earlier? As of now, they need to change the html page and upload an image using filezilla. Are there any Admin interfaces that allow you to customize what you want to change/add to an html page?
I want to create a gallery of images with a fancybox-esque style but incorporate the "folder functionality" that this site has: [URL] In other words: When I click on an image I want it to expand to "fullscreen". (This I can manage with fancybox.) What I can't work out how to do is display more images from the same photo-session at the bottom of the fullscreen.
I'm trying to write a function that rotates images with a fade. The function work properly, however I can't make the images fade back in. The fadein function won't add to the .style.opacity Here's the code with the php
I understand that the very essence of the web is point and click however what I'm trying to achieve is anavigationsystem using a series of static 3D Render images have them seamlessly stitch together creating apseudowalk througheffect. For example if a user clicks on a hot spot e.g. a drawer it will fetch the same image but with the drawer open. or if a user wishes to go 'deeper into the scene e.g. a walk-through style effect then they would click on the hotspot and the image presently loaded would zoom out and and fade out loading the next thus giving you forward motion
mentally speakingIunderstand this to be perfectly simple to do technically speaking not so much this at the moment is acompletelyconceptual idea with no coding as I'm still attempting to get my bearings with jquery i was curious to what peoples thoughts were on the idea whether or not it is possible to do?
I need to refresh multiple images on my site. So every time the page gets refreshed the images need to change. It worked fine with the script below, but this is only related to 1 image
I tried to copy the script and change the "ID's" but this does not do the job.
All 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'm trying to put together a mockup website. to test my knowledge on javascript.So my problem now is putting dynamically a css style using javascript. The style that I need to dynamically put is a hover style, visited style, and link style.
Code: function moveBar() { var bar = document.getElementById("taskbar");
I have found a solution for showing an element on page load (it should be hidden if JS is blocked), but the CSS and the JS go into the <head>. I prefer to keep all such code in external files, so how do I adapt it to support that approach? Found code is as follows (if it can be improved on, feel free to say so):
I have imported css and link to my page. It works fine for all other browsers except Safari browser. When I am loading the page in Safari4 all the page content loads without style. My CSS hosted in CDN.
I am maintaining a program that has a web user interface and is written in the combination of ASP.NET and javascript. One thing that I cannot understand is that the program doesn't run directly in a browser. Actually the program looks just like a window application.Then I can search additional info about it.
1. I cannot examine the HTML to look for error.
2. I cannot use the following javascript to bring up Page-Setup dialog box:
Code:
shell = new ActiveXObject( "WScript.Shell" ); window.setTimeout( "javascript:shell.SendKeys('%fu');", 1000 );
My understanding had been that $.css("width") would return the original user selected style, eg "100%" or "10em", and $.width() returned the computed width, always in "px". Not so, following the code through for .css(), it calls something called getComputedStyle and the only difference between the two functions turns out to be a post-fix of "px" on the .css() result - not very useful. I need to know whether my user has called me with a proportional dimension, or a fixed one. How to tell with jQuery?
I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user:
The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page.
I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes.
how to do a text editing interface similar to the one on this forum, where you can click on a bold B to set the tags between the text to be bold, etc. How do you get a javascript window with a text field so users can enter the text, and then how do I enclose the tags around that value?
The rest of the stuff in PHP I can do (just substitute [b] for strong or whatever), but I'm baffled about the javascript bit.
