|
JavaScript - Mouseover
I have created a page using the code below and it works fine.
Is there any way that I can replicate the gallery further down the page using different images? When I try, the mouseover on the top gallery opens the images in the bottom gallery. Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("i/1-big.jpg","i/2-big.jpg","i/3-big.jpg","i/4-big.jpg")
</script>
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
Similar TutorialsI set up an image mouseover for the next button but its not working. I have two images set up but the second one wont appear when mousing over image. You can see it at www.college-ebook.com Good morning all, I am trying to write a JavaScript that performs the following action: When I roll my mouse over on a paragraph with a Code: <p class="hover-target"> Paragraph goes here</p> It will do a reverse video of it. Currently the web page is in white background, black text. So when the mouse rolls over that particular paragraph it will be a black background, white text for that paragraph only. The JavaScript I wrote is: Code: {
Core.start
(
( function()
{
function mouseoverListener(evt)
{
evt = evt ? evt : window.event;
core.addClass (this, " over");
}
function mouseoutListener(evt)
{
evt = evt ? evt : window.event;
core.removeClass (this, " over");
}
return {
init: function()
{
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++);
{
if (core.hasClass(allElements[i], "hover-target"))
core.addEventListener(allElements[i], 'mouseover', mouseoverListener);
core.addEventListener(allElements[i], 'mouseout', mouseoutListener);
}
}
};
}
)()
);
}
The HTML document has the right path to the scripts (core. js and the rollover.js) as well as the stylesheet (index_style.css). Also, the CSS stylesheet code is: Code: .over{
color:white;
background:black;
}
There is more to this stylesheet but I am only highlighting the rollover style. Am I missing something from my code? Thanks for your time. http://www.outwarstop.com/woz/woz09r3a.php On this page located around where it says Drops under where it says "Sha-Zhul ArchDemon [60]" are the mouseover's but the location of the popup doesnt come up at the mouse, but on the left side of the table, i need help gettin the popup to appear where the mouse is located. The following piece of codes work like this: When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes. <html> <head> <script type="text/javascript"> function over(e) { if(e.toElement){ if(e.toElement.tagName.toLowerCase() == "input"){ e.toElement.value="IE New"; } } } function out(event) { if (event.srcElement){ if(event.srcElement.tagName.toLowerCase() == "input"){ event.srcElement.style.background= "green"; } } } </script> </head> <body> <div id="1">aaaaaaaaaaaaaaaaaa </div> <input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" /> </body> </html> This sequence works fine, until the following case: First let's see the direction of the button: (left) <--------> BUTTON <--------> (right) Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed. Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered. What caused this? Thanks Scott I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.
I tried to use the CSS Horizontal List Menu from http://www.javascriptkit.com/script/...stopmenu.shtml, and it is working with the one exception of the three images not showing up. I did did save them to the directory that contains the page I pasted the scripts to, and all of the links are showing in plan test only. I placed them original in a sub-folder call graphics which is the folder I have all of the graphics in. I also place them in the root director that has all of the HTML fiiles.
Hi there. I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on. I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term. Thanks. Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh. I'm working at masking my fantasy football site hosted by my provider onto my own subdomain, since they can't allow me point a dns at their servers. I did manage to mask the webaddress to my sub doman with a php script. But it also only masks the initial visit, and th link name. And now i'm trying to learn how mask the various url/links in the menus. As I little about javascript, can someone show me a way to mask the url address when a user mouses over them? The links themselves wont' change, I'm just trying to mask the link names on the mouseover to look like their on my own domain. Hope that all made some sense Hey guys, I need some help. I have divs placed in a html document, and what I need to do is have a sound play when a person is to hover their mouse over the,. I used this code that I've butchered together from researching on the internet, but it just isn't working. The sound plays automatically as soon as the site loads. Can you please help me? Here is my code: Code: <html>
<head>
<script>
function EvalSound(soundobj) {
var thissound= eval("document."+soundobj);
thissound.Play();
}
</script>
<embed src="C.mp3" autostart=false width=0 height=0 name="C"
enablejavascript="true">
<embed src="D.mp3" autostart=false width=0 height=0 name="D"
enablejavascript="true">
</head>
<link rel="stylesheet" type="text/css" href="NavTest.css">
<div id=red alt="#" onMouseOver="EvalSound('C')"></div>
<div id=blue alt="#" onMouseOver="EvalSound('D')"></div>
</html>
Thank you! [: Sorry, maybe I should also mention that my knowledge of Javascript is NONE! :| Hello, I've got a strange image with mouse overs on a menu. my code; Code: function SwapImage(strName,strImage){
ImageFlip= new Image()
ImageFlip.src = "images/" + strImage;
var strImageOn = document.getElementById(strName);
strImageOn.src = ImageFlip.src; return true;
}
<table border='0' cellpadding='5' cellspacing='5'>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem1','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem1','MouseOut.png');\"><a href='/'><img src='images/home_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem1' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem2','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem2','MouseOut.png');\"><a href='/artwork.php'><img src='images/artwork_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem2' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem3','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem3','MouseOut.png');\"><a href='/artists.php'><img src='images/artists_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem3' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem4','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem4','MouseOut.png');\"><a href='/about.php'><img src='images/about_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem4' /></td>
</tr>
<tr>
<td width='33' onMouseOver=\"SwapImage('MenuItem5','MouseOver.png');\" onMouseOut=\"SwapImage('MenuItem5','MouseOut.png');\"><a href='/links.php'><img src='images/links_btn.png' border='0' /></a></td>
<td width='11'><img src='images/MouseOut.png' border='0' id='MenuItem5' /></td>
</tr>
</table>
this is in a php page, thats the reason for the extra slashes/espaces. for some reason, only the last row of the menu works with the mouse over, maybe I'm missing something, but it seems like it should all work. any ideas would be really helpful. cheers, -Ken Hi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect: http://www.webdesignerwall.com/demo/...ed-hover2.html i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work. can anyone help??? thanks! Hi all, Does anybody know how to get the rownumber from a gridview on mouseover. The gridview is on an aspx page and i need to call the javascript from the rowcreated part. I am still a newbie to javascript, so any help is a lot of help. Thank you Hello everyone. I hope to stay well in this forum, but for now there are all the cards on the table to happen. I write primarily driven by a need: Starting from this script: Link I would like to integrate a system of hidden text in the four hill icons when the mouse over one of these and, above all, to enter as there is in the photo galleries <> that allows me to have a new set of icons. I trust in you. Thanks in advance, I hope to stay well! I am trying to make it so when I mouseover on one div another div appears. And when I mouse out, the div disappears again. Here's what I have, it's not working. Both divs are always showing. Code: <script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
This div is visible
</div>
Any way I can make this work any better? Am I supposed to have something in my main.css file? I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!
I searched long and hard for an example of how to do this but couldn't find anything similar, even after searching a good number of other forums. Below is a script I have that displays a list of summary info for multiple people. When you mouse over some ones summary info, a bio appears below that summary info (pushing everything below it down). What I'd like to do is take it further and allow more layers. For example, when you hover over their bio, more info about them pops up below that, and so on. I know you're probably tired of seeing mousevent/text questions but I'm desperate at this point. If some one could just add a mouseover event to the bio section that displayed more text below it would suffice and I could take it from there. Heres the code: Code: <p>
<script type="text/javascript">
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS: [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
//Declaring Variables to be used later
var staff_members = -1;
var max_staff_members = 9;
var staff_name_array = new Array(); //Array of strings
var staff_title_array = new Array(); //Array of strings
var staff_length_array = new Array(); //Array of strings
var staff_info_array = new Array(); //Array of strings
var staff_array = new Array(); //Array of strings
var staff_id_array = new Array(); //Array of answer IDs
var image_source_array = new Array(); //Array of full html code, for images
var staff_start = new Array(); //Array of starting pos for staff bios
var staff_end = new Array(); //Array of ending pos for staff bios
var start_span = '<span style="font-size: 12px;">';
var end_span = '</span>';
var img_start_str = "<img alt=";
var img_end_str = '">'; //"border-style: solid;";//Followed by " />
var img_end_str_len = 3; //24;
function init() {
remove_staff_tag();
for (i = 0; i < staff_members; i++) {
staff_name_array[i] = ""
}
for (i = 0; i < staff_members; i++) {
staff_title_array[i] = ""
}
for (i = 0; i < staff_members; i++) {
staff_length_array[i] = ""
}
for (i = 0; i < staff_members; i++) {
staff_info_array[i] = pull_bio(i)
}
for (i = 0; i < staff_members; i++) {
staff_array[i] = start_span + staff_name_array[i] + //"<br/> " +
staff_title_array[i] + //"<br/> " +
staff_length_array[i] + //"<br/> " +
staff_info_array[i] + end_span; //"<br/> " +
}
for (i = 0; i < staff_array.length; i++) {
staff_id_array[i] = "emp_bio_long_" + (i);
}
remove_unused_staff();
}
function remove_staff_tag() {
var ret = document.getElementById("div_tag").innerHTML;
var ind = ret.indexOf("(max 9):[");
var text_after_num = ret.substring(ind + 8);
staff_members = liferay_workaround("," + ret.substring(ind + 9, ind + 10));
document.getElementById("div_tag").innerHTML = text_after_num.substring(8);
}
function remove_unused_staff() {
var div_html = document.getElementById("div_tag").innerHTML;
for (i = 0; i < max_staff_members; i++) {
staff_start[i] = div_html.indexOf("emp_bio_short_" + i) - 29;
staff_end[i] = div_html.indexOf("Bio " + (i + 1) + " End") - 26;
}
end_pos = staff_end[staff_members - 1];
document.getElementById("div_tag").innerHTML = div_html.substring(0, end_pos);
}
function pull_bio(emp_num) {
var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
var len = ret.length;
var img_start_pos = ret.indexOf(img_start_str);
var img_end_pos = ret.indexOf(img_end_str);
return ret;
}
function set_all_bios() {
for (i = 0; i < staff_memebrs; i++) {
staff_info_array[i] = "changed";
}
}
function pull_pic_test(emp_num) {
var ret = document.getElementById("emp_bio_long_" + emp_num).innerHTML;
var img_start_pos = ret.indexOf(img_start_str);
var img_end_pos = ret.indexOf(img_end_str);
var ret2 = ret.substring(img_start_pos, img_end_pos + img_end_str_len);
return ret2;
}
function get_bio(emp_num) {
return staff_array[emp_num];
}
function clear_all_bios() {
for (i = 0; i < staff_id_array.length; i++) {
document.getElementById(staff_id_array[i]).innerHTML = '';
}
}
function change_text(id_to_change, value_to_change_to) {
clear_all_bios();
document.getElementById(id_to_change).innerHTML = value_to_change_to;
}
function liferay_workaround(almost_number) {
var adj = false;
if (almost_number == ",0") {
almost_number = 0;
adj = true;
}
if (almost_number == ",1") {
almost_number = 1;
adj = true;
}
if (almost_number == ",2") {
almost_number = 2;
adj = true;
}
if (almost_number == ",3") {
almost_number = 3;
adj = true;
}
if (almost_number == ",4") {
almost_number = 4;
adj = true;
}
if (almost_number == ",5") {
almost_number = 5;
adj = true;
}
if (almost_number == ",6") {
almost_number = 6;
adj = true;
}
if (almost_number == ",7") {
almost_number = 7;
adj = true;
}
if (almost_number == ",8") {
almost_number = 8;
adj = true;
}
if (almost_number == ",9") {
almost_number = 9;
adj = true;
}
if (!adj) {
almost_number = 1;
}
return almost_number;
}
</script></p>
<div class="faq-content" id="div_tag">
<p id="staff_num">
Enter number of staff members within the brackets (max 9):[4]</p>
<p class="emp_bio_short" id="emp_bio_short_0" onmouseout="" onmouseover="change_text('emp_bio_long_0', get_bio(0))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company: </strong>18 years</span></p>
<p class="answer" id="emp_bio_long_0" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 1 End --------------------------><!---------------------- Bio 2 --------------------------> <p class="emp_bio_short" id="emp_bio_short_1" onmouseout="" onmouseover="change_text('emp_bio_long_1', get_bio(1))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company: </strong>5 years</span></p>
<p class="answer" id="emp_bio_long_1" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets]</span>]</p>
<!---------------------- Bio 2 End --------------------------><!----------------------- Bio 3 --------------------------> <p class="emp_bio_short" id="emp_bio_short_2" onmouseout="" onmouseover="change_text('emp_bio_long_2', get_bio(2))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company: </strong>6 years</span></p>
<p class="answer" id="emp_bio_long_2" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!---------------------- Bio 3 End --------------------------><!----------------------- Bio 4 --------------------------> <p class="emp_bio_short" id="emp_bio_short_3" onmouseout="" onmouseover="change_text('emp_bio_long_3', get_bio(3))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name: </strong>Name<br />
<strong>Title: </strong>President & General Manager<br />
<strong>Length of Time with Company:</strong> 5 years</span></p>
<p class="answer" id="emp_bio_long_3" style="text-align: left;">
[<span style="font-size: 12px;">[You may edit this text to match the intended biography but leave the brackets] </span>]</p>
<!----------------------- Bio 4 End --------------------------><!----------------------- Bio 5 --------------------------> <p class="emp_bio_short" id="emp_bio_short_4" onmouseout="" onmouseover="change_text('emp_bio_long_4', get_bio(4))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_4" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 5 End --------------------------><!----------------------- Bio 6 --------------------------> <p class="emp_bio_short" id="emp_bio_short_5" onmouseout="" onmouseover="change_text('emp_bio_long_5', get_bio(5))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_5" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 6 End --------------------------><!----------------------- Bio 7 --------------------------> <p class="emp_bio_short" id="emp_bio_short_6" onmouseout="" onmouseover="change_text('emp_bio_long_6', get_bio(6))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_6" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!---------------------- Bio 7 End --------------------------><!----------------------- Bio 8 --------------------------> <p class="emp_bio_short" id="emp_bio_short_7" onmouseout="" onmouseover="change_text('emp_bio_long_7', get_bio(7))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_7" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 8 End --------------------------><!----------------------- Bio 9 --------------------------> <p class="emp_bio_short" id="emp_bio_short_8" onmouseout="" onmouseover="change_text('emp_bio_long_8', get_bio(8))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_8" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 9 End --------------------------><!---------------------- Bio 10 --------------------------> <p class="emp_bio_short" id="emp_bio_short_9" onmouseout="" onmouseover="change_text('emp_bio_long_9', get_bio(9))" style="text-align: left;">
<span style="font-size: 12px;"><strong>Employee Name:</strong> Name<br />
<strong>Title: </strong>John Smith's Title<br />
<strong>Length of Time with Company: </strong>0 years</span></p>
<p class="answer" id="emp_bio_long_9" style="text-align: left;">
[You may edit this text to match the intended biography but leave the brackets]</p>
<!----------------------- Bio 10 End --------------------------></div>
<p>
<script type="text/javascript">
init();
change_text('emp_bio_long_0', get_bio(0))
</script></p>
I'm not completely sure this is javascript, but is there a way of changing the z-index of my flash object when hovering over it? Here is a link to my page: http://aspspider.org/Samii/HireCar.aspx As you can see, you cannot click on the link in the main content area because the menu is on a higher z-index than the content. I need a way for the content to be on a higher z-index than the menu until the menu is hovered over, in which case the z-index of the menu will be higher. I hope this makes sense. Please help, this is driving me insane! Samii x Hello, I'm trying to put a site together and this time I'm going for an interactive feel. Code: <p id="status">[Closed]</p> Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into Code: <a href="index.php">Open</a> but I can't get this figured. Could someone help me? Thnx! Im new to this forum and was wondering if anyone would mind helping me out. Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english. heres the code <code> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .hide { display:none; } .show { display:inline; } </style> <script type="text/javascript"> if(window.addEventListener){ window.addEventListener('load',showlinks,false); } else { if(window.attachEvent){ window.attachEvent('onload',showlinks); } } function showlinks() { lis=document.getElementById('nav').getElementsByTagName('li'); for(c=0;c<lis.length;c++){ lis[c].onmouseover=function() { this.getElementsByTagName('span')[0].className='hide'; this.getElementsByTagName('span')[1].className='show'; } lis[c].onmouseout=function() { this.getElementsByTagName('span')[0].className='show'; this.getElementsByTagName('span')[1].className='hide'; } } } </script> </head> <body> <ul id="nav"> <li> <span>[Closed]</span> <span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.google.com/">google.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://w3c.org/">w3c.org</a></span> </li> </ul> </body> </html> </code> As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages. |
|||||||