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
Some history: Although I know that it is considered 'old' technology, I have built hundreds of imagemaps over 10 years for a local photographer who uses a panoramic camera (now a spectacular digital one) to photograph weddings, schools etc. I then pop an imagemap area over each face and add a title (and alt text for IE viewers) that shows up on mouseover to identify the person.
I've been using the jQuery tools library recently and tried changing this tooltip demo which turns an image's title into a tooltip from:
$(document).ready(function() {
$("#demo img[title]").tooltip('#demotip');
To:
$(document).ready(function() {
$("#demo area[title]").tooltip('#demotip');
Thus grabbing the title associated with an area rather than an image.
I just built a quick proof of concept using the image map of a family meeting on one of my sites, and viewed it in Firefox. As expected, on hovering over an area the tooltip popped up at top center of the image, with the title text in it. Wow! GREAT! I thought. ;-)
BUT...
In IE: Tooltip pops up, containing the matching title text, but far away from the clicked area and NOT at top center.
In Opera: No tooltip, browser's title box opens by mouse position, but with out title text, instead it contains the a href link that clicking in the area would go to.
In Chrome: No tooltip, no title.
In Safari: No tooltip, no title.
(BTW All tests were done in current browser versions under Win XP)
I just tried Tero's demo at [URL] in all browsers and it worked fine, in every case the tooltip appeared top center of the image, with the title text in it! So it would seem at first thought to be involved with the way browser manufacturers have built their DOM... But further reading indicates that all post v5 browsers use the same DOM model, so I'm stumped. I've Googled quite a few threads where folk have had js/DOM/imagemaps conflicts, but have found no post resolving the issue.
Since libraries such as jQuery claim to isolate us from browser variances, is it just that imagemaps are considered so 'out of date' that browser manufacturers haven't bothered to update their code to integrate them into the standard DOM? (Bravo FF, 'does it right' again!)
This succeeds in Chrome and Firefox but fails in IE8
$.get('/2/mpeg4.jpg')
.error(function(jqXHR, textStatus, errorThrown) { alert(textStatus); alert(errorThrown);})
.success(function(data, textStatus, jqXHR) { alert(textStatus); alert(jqXHR.responseText);});
[Code].....
This page [URL] works fine in other browsers(Chrome, Firefox, Opera, Safari), but not good in IE8
View 1 Replies View RelatedI am trying to get a pop up window to open when clicking an image map link. The pop up works but needs to be the size of the image (no white space) Image size is actually 365 x 500. I can not post the url because I am new. It pops up but is a small (not image size) pop up and has white space.
<img src="(Images/wedding.jpg)" alt="Weddings" width="580" height="553" border="0" usemap="#Map" />
<map name="Map" id="Map">
[Code]....
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.
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>
I dont understand why the image does not flip whern the mouse goes over the textual link?
View 1 Replies View RelatedI'd like to flip horizontally an image with JavaScript. Is it possible?
View 6 Replies View RelatedI 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.
I have a html document when i run in Internet explorer i am getting the desired output(j query working fine). But i copy pasted the same code in aspx page...the same code is not working properly...
View 9 Replies View RelatedI'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 RelatedI'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:
Can I make image vertical or horizontal flip by jQuery?
View 10 Replies View RelatedOK, so jquery code works fine on a sample test html page. However, when I try to execute the exact same code in my asp.net project, it does not work. I have included the scripts and the paths are correct so it has nothing to do with that.
$(function(){ $('ul.jd_menu').jdMenu({ onShow: loadMenu //onHideCheck: onHideCheckMenu, //onHide: onHideMenu, //onClick: onClickMenu, //onAnimate: onAnimate }); $('ul.jd_menu_vertical').jdMenu({onShow: loadMenu, onHide: unloadMenu, offset: -1, onAnimate: onAnimate}); });
That is the section of code it gives me an error on, it says " Object doesn't support this property or method"
Also, even before I run the project, I have a warning in my error list box that says: Error updating JScript Intellisense (C:~~~blah blah jquery-1.4.2.min.js
I have a script a co-worker wrote and it works in FF and Chrome but IE will not work. Get's a 'activeTab' is null or not an object error, I checked for commas and fixed a semi-colon that was missing in two spots but not change in IE.
code below:
<table class="tan-header rounded-box" style="padding:0px;border:0px;width:560px" cellspacing=0 cellpadding=0>
<tr class="headerrow">
<td class="main">
[Code]....
I have a page HTML. In HTML have 1 button, when click into button that'll appear 1 window. In this window, it's show 1 image and after 5s it will change the other image. I can't do this.
View 5 Replies View RelatedWe're trying to make all the HTML we write to be forward compatible so we're running our code through an HTML validator.The problem I'm seeing is that the 'rel' attribute is not valid for the <input> element. Although it works fine, is there a work-a-round for this?I've used the 'rel' attribute extensively since I've started using jQuery.
View 5 Replies View RelatedObjective is to read from ticker.xml, parse, and set the html of headline1, headline2, headline3, etc. divs to the values of ticker.xml. This works great in IE 8 and FF but not in Chrome.
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
[Code]...
I am trying to do a setInterval to switch the background-image of a div. The switch will happen every second.
Here is the html code...
On firefox 6 and IE9, it switches just fine. On IE8 and Chrome it switches once and then stops.
Not sure why it is working in the newer browsers and not the older ones. I know there were some new javascript features added to the newer browsers, but i cant figure out where the error is occurring.
The following script works perfectly under FF and even IE, but doesn't do anything under ChromeIt's a simple chronometer (I'm a beginner) to calculate gold gained, at the rate of 7 per second.In the HEAD section
<script language="JavaScript">
<!--
var startTime = 0;
[code]....
I'm just starting JavaScript and wrote a quick script for Next/Back buttons for a page showing a family outing on our boat. I proudly uploaded the webpage and emailed it out, but people running IE are unable to use the buttons, they simply do nothing.Here is the .js file, I don't think anything in the HTML or CSS is causing the issue but could post those as well if necessary.
var step = 1;
//preload images
var numImages = 13;
[code]....
i got this javascript function which run perfectly in IE but does not work in Mozilla.
function Changed() {
var theGridView = document.getElementById('MainContent_GridViewRDR1_Hidden');
var sum = 0;
var total = 0;
[Code]....
I have used the following to create zoom button which work fine within Chrome but not Firefox.
HTML Code:
<input type="button" value="A" ONCLICK="zoomin();" class="zoombutton" >
<input type="button" value="a" ONCLICK="zoomout();" class="zoombutton" >
[code]....
I'm using this code:
javascript:
Code:
function showImg(img, width, height) {
gal = document.getElementById("galpic");
newl = Math.round((window.innerWidth - width) / 2);
[Code]....
My Javascript navigation bar works perfectly in IE and google Crome, but not in Firefox.
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function formHandler(strForm, strElement){
var URL =
[Code]...
