Strange Border Appears In Js Image Flip

Jul 3, 2003

I'm creating a tabbed menu navigation for a site. I'm using javascript to to give the tabs a mouseover effect. I also have a function that decides whether the tab has been selected or deselected by the user, and uses that info to determine which image file to use in the img swap.

The page works fine in IE 6, however in Netscape 6.2, when I mouseover the tabs, a thin border quickly flashes around each image as it swaps. It looks like the placeholder that's displayed for a broken image in IE, only with only the border and no red "x". I'm not sure why this is happening, as all the images have been preloaded.

The markup is XHTML 1.0 Transitional. Here's the js I'm using:

View 1 Replies


ADVERTISEMENT

3-way Image Flip

Nov 2, 2000

I have a navigation bar made up images that were sliced for each section. There's also a separate area of the page that has "description" images, that describe the section the person has rolled over. I want it so that when someone rolls over any image, that image changes to a different color, and there's also a new image in the "description" area that has an explanation of that section.

I've seen this done a lot, but I've never been good about plugging JS into my pages, though HTML doesn't seem to bother me.

Anyway, if someone can pass along a cross-browser script that is aetiap (as easy to install as possible!), I would really appreciate it. And maybe some instructions on plugging it in.

View 5 Replies View Related

Image Flip With Sound

Jan 18, 2005

Below is the script. Just insert the name of your sound file where it says car3.wav.
At some point, the script turns from a sound loader into an image loader -- that begins at this line:

if (document.images)

<script LANGUAGE="JavaScript">
var aySound = new Array();
// Below: source for sound files to be preloaded
aySound[0] = "car3.wav";

// DO NOT edit below this line
document.write('<BGSOUND ID="auIEContainer">')
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = ''
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:''
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }

if (document.images)
{img1on = new Image();
img1on.src = "CI-on.gif";
img1off = new Image();
img1off.src = "CI-off.gif";}

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");}
}
//
</script>

There are five links buttons in the demo but only the introduction of "img1" is shown in this sample script.

In the document body, an anchor uses an onMouseOver to call for both the image flip AND the sound play.
Then it uses an onMouseOut to both revert the image and stop the sound play.

<P><A HREF="http://www.jeffs-icons.net/RZ/CI-F.html" TARGET=_top onMouseOver="imgOn('img1'), playSound(0)" onMouseOut="stopSound(0), imgOff('img1')"><IMG SRC="CI-off.gif" NAME="img1" border=0 ALT="Club Info"></A>

View 2 Replies View Related

Image Flip Not Working?

Oct 10, 2010

I dont understand why the image does not flip whern the mouse goes over the textual link?

View 1 Replies View Related

How To Flip Horizontally An Image With JavaScript

Aug 6, 2007

I'd like to flip horizontally an image with JavaScript. Is it possible?

View 6 Replies View Related

Flip An Image Which Is Upside Down In Script?

Feb 21, 2007

I have a.bmp image which is upside down and i need to flip it vertically?

Changing in paint or photoshop is not an option as images are being generated by another program, but come out upside down.

View 3 Replies View Related

Flip An Image Horizontally On The Client Side?

Mar 19, 2011

I'm trying to flip an image horizontally on the client side. Is it possible to rotate or change the orientation of an image by using JavaScript or CSS2?

View 3 Replies View Related

JQuery :: Make Image Vertical Or Horizontal Flip?

Jun 10, 2009

Can I make image vertical or horizontal flip by jQuery?

View 10 Replies View Related

Imagemap Image Flip Works In Chrome Only On CSS/HTML Valid Page?

Jan 5, 2010

this page (http://users.rcn.com/**************/test72.html) will display new images when you mouseover the red and orange arrows on the menu on the right side in chrome, but not ff, ie, opera, and safari. Any ideas as to why these other browsers aren't running the code like chrome? guessing this is javascript related

View 3 Replies View Related

Mouseover The Image And A New Image Appears In Popup Window?

Apr 2, 2009

I looking for script where I can mouseover the image and a new image appears in popup window.

View 2 Replies View Related

On Mouse Over Of Any Image A Pop Up Appears And Displays The Image Information

Aug 24, 2009

[URL] check the above website. on mouse over of any image a pop up appears and displays the image information i want to achieve the same thing in my project which language is used for this purpose and how to do that.

View 4 Replies View Related

Identifying Elements That Call A Function - Change The Border Of Several Images On The Page To Show A 4px Border

Feb 26, 2009

What I want to do is change the border of several images on the page to show a 4px border. There are many images on the page so I just want to call the changeborder() function on the onClick event so as the image that has been clicked changes. However, I don't think using this.style.border to identify the element works when placed within the function. That is, how do I identify, from the function, which image has been clicked? My current code (which does not work) looks like this but I am sure its possible to gather what i'm trying to achieve:

<script type="text/javascript">
function changeborder()
{
this.style.border='4px solid red'
}
</script>
<img style="border: 1px solid #F4F4F4;" onclick="changeborder()" src="images/colours/010.jpg" border="0">

View 1 Replies View Related

Border Around Image

Jul 23, 2005

When I use this code....

window.open('gallery/pic1.jpg','windowname','width=775,height=550,resiz able=yes,scrollbars=yes,top=10,left=10');

....my web page displays a picture with a white border around it. Is there a
way to get rid of the white border? I want to continue to link directly to
my image (pic1.jpg) and not to an HTML page. The reason for this is because
if I link directly to an HTML page then I seem to have problems with pop-up
blockers.

View 1 Replies View Related

Repeat Image For Border

Mar 11, 2007

Can someone point me to some resources on how to tile an image to create a
border?

<td><img src="images/MTile.png" width="1" height="30" alt=""></td>

I have something like that where I need to repeat x times where x depends on
the width of the browser. (Not sure if its a good idea to use a bitmap of
width 1 but I could use one that is larger and then use both(e.g., maybe one
that is 10 pixels wide and repeat that as needed and let the 1 pixel wide
one get the rest(I have some "ends" on the border that I need to display too
so it sorta needs to be exact))

Not sure how to do this with js(just learning it) but obviously I just need
to get the width of the border and then figure out how many times I need to
repeat the code.

I have several issues I am wondering about though. First off is that I have
used photoshop imageready to create a roll over menu bar but in firefox when
I use the down state it leaves a selection rectangle around the image but in
IE it does not do this. It does not look nice in firefox and I'm sure there
is some way to prevent it. (for some reason it selects it when you click the
menu item and this probably can be turned off using css?)

Another issue, which isn't a big deal, is that I'm using symmetric bitmaps
to "cap" the border. I was wondering if it is possible to flip the image
using html or js so that I don't have to have a seperate image for it?

View 7 Replies View Related

Swap Image With A 1px Border?

Apr 3, 2011

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...).

View 3 Replies View Related

Detect If Mouse Is Over The Border Table And Over Cell Border?

Jan 7, 2009

is there a way how to detect if mouse is over the border table and over cell border? and if yes, when user click and host button and move mouse cursor (to increase cell width) which event should i detect ?

View 1 Replies View Related

Way To Change Border Of Image On OnClick

Jun 3, 2011

I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one.This is my PHP code that outputs the bases:

$gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";

[code]....

View 5 Replies View Related

How To Change Border Around Image Rotation

Jan 11, 2011

I am making a website and I have image rotation written in javascript and atm I am trying to change the boarder around my image rotation because right now the boarder is purple but nothing I do seams to work so. Here is my code
<a href="Page2.html"><img id="r1" src="images/Pro-Tech Antivirus Cover.jpg" alt="" border="5"></a>
Its all defined and everything I just need to no how to change the border so its not purple. I want it to be dark cyan?

View 7 Replies View Related

Multible Windows - Java Pop Up Appears When My Page Is Visited Another One Appears Over The Top Of It

May 28, 2010

how do i get it/what is the source code so when one java pop up appears when my page is visited another one appears over the top of it like in windows when they is 2 boxes but one overlaps the other one

View 1 Replies View Related

Highlight Image - Click On Another Row The First Border That Changed Obviously Changes Back

Aug 27, 2010

I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script>

var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script>

to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here.

View 2 Replies View Related

Hover Over A Image, Text Appears On The Bottom?

Jan 13, 2011

trying to find a example of when you hover over a image, text appears on the bottom

so it could be a picture of a dog, whne you put your mouse over it, text will show in the picture (ie* transparent background for text so it's readable)

View 1 Replies View Related

Click Here - Image Appears - Images Layer Over Each Other

Mar 25, 2010

I've tried the tutorials but I have never worked well with those -- I've always found it easier to actually be working with someone. But anyway. Basically, I need something sort of like this [URL] -- you click the thumbnail and the image appears in that predetermined spot. One thing, though: the images have to layer over each other. Like, you click image A, and it appears in the spot. You click image B, and it appears on top of image A. It'd be even better if when you clicked Image A it appeared and then you clicked image A again and it disappeared, but I'm going to try to start small.

I've gone through the tutorials and have a sort of ish understanding about what some of the parts of the codes do, and I've been told I'm a fast-ish learner, so I think I'll catch the hang of this quick.

View 5 Replies View Related

JQuery :: Counting The Number Of Times The Same Image Appears?

May 6, 2011

I have a need to count how many time the image ok.png is displayed within a div. this is for a dynamic sys req. check where 1 of three images will be shown in a row. If the endusers browser doesnt meet certain req, it will show either an alert, question or an ok.png.I need to know how many oks there are, specifically I need to check that all five images are the ok.png so I can show the rest of the content.I am able to get the number of images with a simple var totalgreen = $("#wrap img").length; But im stuck after that.

View 2 Replies View Related

Thumbnail Images - On Mouse Over Larger Image Appears?

May 16, 2009

I was wondering if someone could assist me with a problem, i am trying to use the simple mouseover function to to able for my user to mouse over an thumbnail image and them the full size image apears in a black space on the webpage!plus, is there a way to have only 1 image instead of having a small one and a large one. i.e a large image can be resized for the thumbnail and appears normal in the mouseover.

View 7 Replies View Related

Animate - Make The Image Of The Kangaroo Appears To Hop Up And Down Across The Screen

Mar 11, 2009

I would like to make the image of the kangaroo appears to hop up and down across the screen.

<html>

View 1 Replies View Related

Image Swap - Allow A Zoom Function Or Lightbox Function To The Image That Appears

Oct 4, 2009

I want text links to swap the image on the website, but then want to allow a zoom function or lightbox function to the image that appears. I'm not best at explaining things so i've done an example below. After clicking the link, the image changes. i want to be able to do the zoom on the image that it's changed to.

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved