JavaScript - Image Disappears In Ie8 When Expanding Multi-line Text Using Css And Javascript

I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't.

I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working.

Code:

<img src="images/map.png" alt="" usemap="#map"/>
			
<map id="map" name="map">
<area shape="rect" coords="211,84,225,97" href="#" alt=""/>
<area shape="rect" coords="226,78,240,92" href="#" alt=""/>
<area shape="rect" coords="353,66,376,89" href="#" alt=""/>
</map>

<div id="hidden">
	<div class="location" style="left:25px; top:-290px;">
		<img src="images/location01.jpg" alt=""/>
	</div>
				
	<div class="location" style="left:25px; top:-275px;">				
		<img src="images/location02.jpg" alt=""/>
	</div>

	<div class="location" style="left:275px; top:-285px;">
		<img src="images/location03.jpg" alt=""/>
	</div>
</div> <!-- #hidden -->

Code:

function show(which) {
	var area = document.getElementById("map").getElementsByTagName("area");
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var a=0; a < area.length; ++a) {
		if(area[a] == which) locations[a].style.display="block";
		}
	}
					
function hide() {
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var d=0; d < locations.length; ++d) {
		locations[d].style.display="none";
		}
	}
					
function init() {
	var area = document.getElementById("map").getElementsByTagName("area");

	for (var a=0; a < area.length; ++a) {
		area[a].onmouseover = function() { show(this); }
		area[a].onmouseout = hide;
		}
	}

window.onload = init;

Code:

function initMenu(){
  var menus, menu, text, a, i, CurrentID;
  menus = getChildrenByElement(document.getElementById("menu"));
  CurrentID = document.getElementById("auto");
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
	
  }

  //CurrentID.showMenu; thought this would work but it doesn.t
}

I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts

If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet.

I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this:
Menu Item 1 [Click to expand]
-Sub Item 1.1 [Click to expand]
-Sub Item 2.1 [Click to get to page]

Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please?

URL: http://dinotamermeep.blogspot.com/p/blog-archive.html

Thank you,
-Meepski

Hi all,

I am looking to create this in JS/DHTML/CSS that I found in a flash script you can view he
http://www.melodicmedia.com/dev/expa...ash_flash.html

I want the red expanding and contracting circle to be on top of a image so it only shows the parts of the image that the circle is around.

Any help you have would be much appreciated =)

Thank you =)

Light and Love and Healing to you,
-Patrick Arden McNally

I am creating a photography website and am almost there with coding a very simple image viewer with clickable thumbnails etc.

I have used the following script to change the images;

Code:

<script>
function changeImage(filename)
{
   document.mainimage.src = filename;
}
</script>

the main image is like this;
Code:

<img name="mainimage" src="../Images/wedding-photo-01-bride-getting-ready.JPG" title="bride getting ready"/>

And the links/images are like this.....

Code:

<a href="javascript:changeImage('../Images/wedding-photo-01-bride-getting-ready.JPG')">
                <img class="thumbbox" id="mainimage" src="../Images/wedding-photo-01-bride-get-thumb.JPG" alt="wellis photography logo" title="bride getting ready">
</a>

This works fine, but I would also like a caption underneath the main image that changes at the same time. Is there a way to do this simply? Perhaps using some variation of the following script?

Code:

<script type="text/javascript">
document.write(document.getElementById('myimage').title);
</script>

Also, one other thing - is it possible to add a 'fade' transition to my 'changeimage' function?


Thanks in advance

So I found this script and i give all props to the author but can anyone help me to add text to the random images. Also i need a button that will generate the random images/text not when you refresh the page but when your press the button and to not display any image/text till the button is pressed?

Thanks in advance.

[CODE]
<script language="Javascript">

var currentdate = 0
var core = 0

function StringArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '

}
}

image = new StringArray(10)
image[0] = 'images'
image[1] = 'images'
image[2] = 'images'
image[3] = 'images'
image[4] = 'images'
image[5] = 'images'
image[6] = 'images'
image[7] = 'images'
image[8] = 'images'
image[9] = 'images'

var ran = 60/image.length

function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
return(image[core])
}

document.write("<img src='" +ranimage()+ "'>")

</script>
<form>
<p><input type="button" name="B1" value="Switch It Up" onclick="ranimage()"></p> </form>

[CODE]

Hi all,

I was just wondering if there is a JavaScript tutorial online that shows you how to do similar hover effect to what Twitter does with the trending topics. Such as Inception.

When you hover over it and a black bubble appears.

Also I'm not sure what it is called.

If anyone knows how to do it, It would be appreciated.

Thanks!

want to get selected text and image values .Since there is an randomly changed text and image on my page.I used window.getSelection() but this will return only selected text values not images ..so please guide me to solve this problem.

I am looking for a javascript code for this idea under this message

----------------------------------------------------------------------------------------------------------------------------------------------------

I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item

I have two known methods of creating a javascript array:

1) Double brackets such as:

Code:

var animation_JD = [[]];

2) Create and array then create an array inside each array element manually which is the most common method as far as I know.


The problem is that the second method requires the array be be defined in size and I require a 2D array, 3D array and 4D array. Using the second method uses far to much memory to be plausible, unless there is a way to make arrays smaller by defining parts of them as integers only?

Otherwise for the 1st method I described I don't know how to loop through all elements of the array such as:

Code:

for(group in animation_JD){

}

So does anyone have another way of creating arrays, defining an array as integers only(ideally not every part of the array) to save memory, or a way to loop through arrays created in the first method?

Thanks!

i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine.

the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same??

this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state.

I don't want the city option to change upon a normal page refresh. how do I go about this?

below are the city, hotel select options & iframe
Code:

    <form name="hotelslist" id="hotelslist">
        <select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
          <option value="Baddeck">Baddeck</option>
          <option value="Banff">Banff</option>
        </select>
    <select id="hotelnames" name="hotelnames" onChange="loadHotel();">
          <option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
        </select>
      </form>

<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>

below is my javascript functions
Code:

function loadHotel() { 
    var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value; 
		window.frames["hotelframe"].location = destURL; }

var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
	hotelslist.hotelnames.options.length=0;
	
switch(i)
{	
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new  Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new  Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new  Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new  Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new  Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new  Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}

can some one please advise on a cross browser solution?

thanks in advance.
Omar.

As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page.

For Example:

Input- 512

Output - Austin, TX

The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks!

Hello all,

I am doing a website project and in that currently I am designing a product page.

I have to design add values to text boxes and drag and drop the text boxes in the workspace and delete the text boxes the user does not want and have to draw a graphical line between the text boxes which are in order.

I have designed and coded everything except the graphical line part.

I am a learner in javascript and Can we draw a graphical line dynamically between the text boxes in the webpage? If we can draw, can anyone let me know the tutorial for that so that I can learn and start coding as I have to submit that project soon.

Thank you.

How do I get new line to work in javascript. Everytime I try to use it, it never works.
There should be a new line with 5 * instead of having 17 * on one line.

Code:

<html>
<body>

<script type ="text/javascript">
var x=0;



for (x=0;x<=12;x++)


{
	
	document.writeln("*");
}
document.writeln("\n");
for (x=0;x<=5;x++){
	document.writeln("*");
	
	}

</script>
</body>
<html>

Hi there,

I am working on javascript, the problem i have faced here is, i am unable to break the line in javascript. Actually i am using a javascript to open Microsoft Outlook Express, And in the body text i am sending some value like "Name and Address(Shown in code)". I want after task it should break the line and the value of Address will start from new line. But i am unable to do that. The code i have used is given below.

Code:

// JScript File

function EmailIt(emailTO,strAddress,strName)
{
    var daReferrer = document.referrer; 
    var task = escape(document.URLUnencoded);
    var issue_id = document.URLUnencoded.split("=");    
    
    var email = emailTO; 
    var Address = strAddress;
    var Name = strName;
    var subject = "Issue Task number is " + issue_id[issue_id.length-1] + " - " + Address ;
    
    var body_message = "Name "+ Name + " <br />\r\n " + " Address " + Address;
    var mailto_link = 'mailto:'+email+'?subject='+subject+'&body='+body_message;
     
    win = window.open(mailto_link); 
   
    if (win && win.open &&!win.closed) win.close(); 
}

Also i have used following syntax to break the line:
//body_message += '<br />\r\n';
//body_message += "&nbsp;";
//body_message += "\"\n\"";.
But didn't got succeed.
Can anybody help me to come out of this problem.

Regards
Vimal kumar
Madhepura, Bihar