Another slightly different random image question. My coding is working fine in Safari (mac) but all that shows up in IE6 is the caption, not the image itself.
Code: function randImgCap() { var banner = new Array(); banner[0] ="images/robpics/After_Fire.jpg" banner[1] ="images/catepics/2tight.jpg"
I've got an image that I want to refresh every time a certain event occurs. So in my html I've got something like <div><img name="theImage" src="anImage.jpg" alt="No image found" onclick="refreshImage();" /></div>
Then in the javascript I have
function refreshImage() { var now = new Date(); document.images["theImage"].src = "anImage.jpg?" + now.getTime(); }
So before I click the image to trigger the event, I change the image on the server, but keeping the same name. So the image displayed in the browser should change to the new one when I click it. But when I do this, the image DOES change, but part of the bottom gets cut off. There's enough space for the whole image, in fact if I put a border around the div, the border is just the right size, but only part of the image is being displayed. Also, it is always the top part of the image being displayed.
Basically what I'm trying to achieve is when a new image is selected(clicked), the 'click' passes the new image name (and width, height) to the 'changeimg' function, I want this function to fade the current img so we can see the back ground wait img. then when the new image has preloaded successully, replace the current image and fade it back to full. It appears to do this mostly, but its not preloading the image, sometimes the contain will exapand to the new size and I'll see the image loading into it.
I'm wondering if I'm using the preload (new Image()) correctly, I cant locate any examples similar to what I'm doing. Most exapmles I see all appear to be to do with image rollovers. Which isn't what I need, I also do not want to pre load any images until they have been requested.
Code: <html> <script language="Javascript"> if (document.images) { [url].....
What happens: You see both image1 and image3, but when you mouse over either of them, nothing happens...So I'm trying to have "multiple images" rollover...
Edit: So by adding in the red, that's when all rollovers cease to function.
<img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle"> <img id="chosen" class="selector" src="selector.jpg" alt="Click for next image"
[Code]....
Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything.
I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size.
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000;
I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover.
<script type="text/javascript"> function ShowPopup(hoveritem) {
So the idea of the code is to load an image from a record, and echo both scenarios of 1) the image being a valid size and fitting in the table, or 2) the image width is too large, so add on width='100%' to the image. After both rows have been loaded, call the javascript function in PHP to hide the appropriate table row.
The link for the page is here [URL]. As you can see there is an image gallery that is supposed to be controlled with lightbox, however I can not get the lightbox script to work and everything I've looked at seems ok. Any ideas I have uploaded all the required js files and images files as well.
I am working on an Image Map project, the project must be written under xhtml 1.1 and must validate. The problem is Firefox and Safari will not support the image map without the name attribute, internet explorer does. If I add a name attribute to the image map, the code will not validate under xhtml 1.1. Is there any way to have this work without the name attribute in FF and Safari? The inline styles will be remove later and I would also like to replace the variables with an array but for now the focus is on getting this to work in FF without the name attribute. I can just change the doctype to transitional but we have to use xhtml1.1.
Here is the code: Code: <script type="text/javascript"> var koalaMouth = "This is my left ear!"; var koalaLeftEye = "This is my left eye!"; var koalaNose = "That is my nose!"; var koalaMouth = "That is my mouth!"; var koalaRightEye = "And that is my right eye!"; function writetext(message){ document.getElementById('displayText').innerHTML=''+message+''; }function defaultText(){ .....
This image gallery is not working in all browsers. It seems to work in an older version of FF on both PC and Mac but not working in IE or newer versions of FF.I created this gallery using an Adobe Bridge Extension.
I am having some problems with a script I am using for my website. It works ok in all the browsers except IE6 and I don't have a clue why. If you click on any thumbnail (provide you don't use IE6) you can see how the script works: [URL] In IE6 if you click on the thumbnail, nothing happens. The thing is I don't get an error message or anything. Now, here's the code I used.
script:
Code: ... <script type="text/javascript"> function change_image(image) {
[Code]....
Curiously if I view in IE6 my local copy of the website on my computer, the script works a bit, in that the big pictures come up but the overlay and the close button don't so you can't close the pix and if you click on another thumbnail the following big picture overlaps the previous one. But this is only the local copy as I said, the live site doesn't work at all in IE6.
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?
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.
I have this simple gallery that loads images from an xml file and usesFancyboxto display the images. Demo Everything is working but the last image is not working with fancybox. The last image just displays in it's own window.