|
JavaScript - Changing Text And Images On Mouseover
I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering.
I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is: <script type="text/javascript"> if (document.images) {image0 = new Image; image0.src = "i/p0.png"; image1 = new Image; image1.src = "i/p1.png"; image2 = new Image; image2.src = "i/p2.png"; image3 = new Image; image3.src = "i/p3.png"; image4 = new Image; image4.src = "i/p4.png"; image5 = new Image; image5.src = "i/p5.png"; image6 = new Image; image6.src = "i/p6.png"; }</script> and <img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/> <span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span> <br clear="all"/> <span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/> Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful. Similar TutorialsI am probably use way too much code to have this done.. but this is what I came up with.. Code: $(function() {
$("#mail")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Signup for Alpha Web Pro, you get your own email account with us. [username]@alphawebpro.com").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
$("#user")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Check out the Alpha Web Pro community. There you can interact with your programming friends and post things to the forum").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
$("#analytics")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("COMING SOON! - Website analytics for any and all of your websites you wish to monitor").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
$("#shop")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Go shopping at Alpha Web Pro.com; we have what you are looking for. Website templates, scripts, and ebooks for noobs all the way to master coder").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
Problem is it doesn't do anything. When I only have one image set to change on mouseover it works fine.. I put two or more in there it doesn't work on any of the images. Any idea whats going on? Thanks in advanced! I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code: Code: var current_overID = "";
var last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
function mouseover (itemID, mapID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.deltavmap.src = item [current_overID].slide_img.src;
document.deltavmap.useMap=mapID;
}
}
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more
<MAP NAME="deltav">
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')" window.defaultStatus='' window.status='Engineering' return true >
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true >
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true >
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<MAP NAME="eng">
<AREA SHAPE="RECT" COORDS="38,52,244,75"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
window.defaultStatus=''
window.status='Batch Processing' return true
>
<AREA SHAPE="RECT" COORDS="40,82,230,103"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
window.defaultStatus=''
window.status='Control Modules' return true
>
<AREA SHAPE="RECT" COORDS="40,112,143,136"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
window.defaultStatus=''
window.status='Graphics' return true
>
<AREA SHAPE="RECT" COORDS="40,141,176,168"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
window.defaultStatus=''
window.status='ProtoTyping' return true
>
<AREA SHAPE="RECT" COORDS="24,224,84,234"
HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
window.defaultStatus=''
window.status='Software' return true
>
<AREA SHAPE="RECT" COORDS="24,236,124,247"
HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
window.defaultStatus=''
window.status='Documentation' return true
>
<AREA SHAPE="RECT" COORDS="25,248,76,261"
HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
window.defaultStatus=''
window.status='Support' return true
>
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
... many others
Can any one tell me what i need to do to fix this in IE? Thanks! Fayette 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 Hi there, I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links. I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated. In the <head> section i have this: <script type="text/javascript"> img1 = new Image(); img1.src = "images/party/party.jpg"; img2 = new Image(); img2.src = "images/party/icecream.jpg"; img3 = new Image(); img3.src = "images/party/juice.jpg"; img4 = new Image(); img4.src = "images/party/videogames.jpg"; function change(num){ document.images["linkpic"].src = "img" + num } </script> </head> In the <body> i have: That's my default image <table> <tr> <td width="100"> <img src="images/party/balloon1.jpg" name="linkpic"> </td> <td width="260" valign="top" align="left"> <table> <tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr> <tr><td><a href="Party2.html" onmouseover="change('2')">Icecream </a></td></tr> <tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr> <tr><td><a href="Party4.html" onmouseover="change('4')">Video Games </a></td></tr> </table> </tr> </table> </body> I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on. Any hints and help are appreciated! Thanks! Watch the answer to this problem be simple... but when I tried searching for similar problems, I can't find anything that helps. On a website of mine, I have a picture that acts as the navigation. When the user hovers over it, it changes pictures to show one section lighting up and the text to show where that one links to under it. Later, I changed it to show, when the mouse isn't hovering over the picture, the pictures automatically scrolling on a timer to show all the options. While this works most of the time, I recently discovered the reason behind a 'glitch' my friend noticed... but I'm unsure of how to fix it. The problem is, when the mouse is already on the picture as the page loads, it starts the timer even though the mouse is there. This causes it to keep trying to switch the picture on its own even when hovering over the picture. And when the mouse is off the picture, it changes it twice at an odd interval. In other words, it's starting the timer up twice and only cuts one of them off when you hover over the image. Here's a link to the site so you can see for yourself: http://nebula-andra.com/ (And if links aren't allowed, just let me know and I'll remove it--it's simply easier to see) Here's the code I have for the image timer... In the header, in a Javascript tag: Code: var currPic = 0;
var totPics = 12;
var keepTime;
var picName;
function setupPicChange(){
keepTime=setTimeout("changePic()", 2000);
}
function changePic(){
currPic++;
if(currPic > totPics) currPic = 1;
document.getElementById("logos").src="../images/logo/NA Logo - " + currPic + ".png";
setupPicChange();
}
function stopTimer(){
clearTimeout(keepTime);
}
function startTimer(){
keepTime=setTimeout("changePic()", 2000);
}
In the body: Code: <body onload="setupPicChange();"> <div id="logo_setup"> <p align="center" onmouseover="stopTimer();" onmouseout="startTimer();"><img src="../images/logo/NA_Logo.png" id="logos" name="logos" border=0 usemap="#logo"> I want the timer to start without the user having to do anything and complete stop when the user hovers over the picture. If there's anything else you need to see to help with this problem, please let me know. And thank you for taking the time to read this; I look forward to any suggestions you can give me. Note: This is being tested in Chrome, but the problem has appeared in both Firefox and IE as well. 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, thanks for looking. I'm new to JS and am trying to use an image several times on the same page, having each image show rollover behavior. The rollover code works for the first image on the page, but when I hover over subsequent images it only changes the rollover state of the first image on the page, not the image I'm hovering over. Any help would be appreciated. I'm using the following functions to change rollover state: Code: gallery_on = new Image ( );
gallery_off = new Image ( );
gallery_on.src = "gallery_on.png";
gallery_off.src = "gallery_off.png";
function button_on ( imgId )
{
if ( document.images )
{
butOn = eval ( imgId + "_on.src" );
document.getElementById(imgId).src = butOn;
}
}
function button_off ( imgId )
{
if ( document.images )
{
butOff = eval ( imgId + "_off.src" );
document.getElementById(imgId).src = butOff;
}
}
I'm using the classic theme for galleria to create a basic image gallery. http://galleria.io/themes/classic/ The gallery is for a photo retoucher who has some before/after photos that I want to switch in and out with a mouseover. Basically when the user hovers over the main image an unedited version of the image will show, when they mouse out the image will revert back to the original. I'm not sure how to achieve this with galleria. I thought I could target the img tags but that doesn't seem to be working. I'm relevantly inexperienced with javascript so I'm not sure how to target the imgs through galleria or if this can be accomplished in an effective way. (maybe changing the src?) I'm not sure if there is anyone familiar enough with galleria to help me out, but i figured asking can't hurt. Any sort assistance would be greatly appreciated. The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons. It works great in Firefox, but does not in Internet Explorer. HELP webpage: http://www.isp.ucar.edu/ ------------ standard mouseover commands are used in index.php <CODE> <a href="http://www.tiimes.ucar.edu/beachon/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"> <img src="images/buttons/button-beachon.gif" alt="BEACHON" width="181" height="74" border="0" id="img1" /></a> </CODE> ------------ <CODE> if (document.images) { img1on = new Image(); img1on.src = "images/buttons/button-beachon-on.gif"; img1off = new Image(); img1off.src = "images/buttons/button-beachon.gif"; img2on = new Image(); img2on.src = "images/buttons/button-bgs-on.gif"; img2off = new Image(); img2off.src = "images/buttons/button-bgs.gif"; img3on = new Image(); img3on.src = "images/buttons/button-iam-on.gif"; img3off = new Image(); img3off.src = "images/buttons/button-iam.gif"; img4on = new Image(); img4on.src = "images/buttons/button-nvia-on.gif"; img4off = new Image(); img4off.src = "images/buttons/button-nvia.gif"; img5on = new Image(); img5on.src = "images/buttons/button-utls-on.gif"; img5off = new Image(); img5off.src = "images/buttons/button-utls.gif"; img6on = new Image(); img6on.src = "images/buttons/button-water-on.gif"; img6off = new Image(); img6off.src = "images/buttons/button-water.gif"; img7on = new Image(); img7on.src = "images/buttons/button-exploratory-on.gif"; img7off = new Image(); img7off.src = "images/buttons/button-exploratory.gif"; // second image that does not appear in original button space img1ad = new Image(); img1ad.src = "images/buttons/beachon-overview-sm.gif"; img2ad = new Image(); img2ad.src = "images/buttons/bgs-overview-sm.gif"; img3ad = new Image(); img3ad.src = "images/buttons/iam-overview-sm.gif"; img4ad = new Image(); img4ad.src = "images/buttons/nvia-overview-sm.gif"; img5ad = new Image(); img5ad.src = "images/buttons/utls-overview-sm.gif"; img6ad = new Image(); img6ad.src = "images/buttons/water-overview-sm.gif"; img7ad = new Image(); img7ad.src = "images/buttons/exploratory-overview-sm.gif"; } { function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); document["holder"].src = eval(imgName + "ad.src"); } } } function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); document["holder"].src = "images/buttons/isp-overview-sm.gif"; } } </CODE> 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>
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! 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. 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! anyone know a script or way to change images based on radio button on another page or way to send value or src of an image to another page and way to have it show up.
Hi everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with: Code: <html>
<head>
<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>
</head>
<body>
<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>
<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />
</body>
</html>
I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time. Hey all, First off, just wanted to send a big thanks out to everyone on this board that has helped me along my path, you all have been a really big help! Ok, now on to today's question. I have a nice little script that changes a company's logo (displayed in a side bar) when the user mouses over a part of an image map. Here is the basic code: Code: <head>
<?php
//assign array of links to string
$row_limit = $num_rows - 1;
for ($otmm_loop=0;$otmm_loop<$num_rows;$otmm_loop=$otmm_loop+1)
{
if ($otmm_loop == 0)
{
$otmm_image_string = "$pic_adr_array[$otmm_loop]".",";
}
elseif ($otmm_loop == $row_limit)
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]";
}
else
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]".",";
}
}
$s1 = "$otmm_image_string";
$qs1 = "\"".implode("\",\"",explode(",",$s1))."\"";
<script type="text/javascript">
function doChanges(y){
var z= y;
var imagevar = myimages[z];
var imagethis = this.href;
changeimage(imagevar,imagethis);
}
</script>
<script type="text/javascript">
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script type="text/javascript">
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(<?echo("$qs1");?>);
</script>
</head>
<body>
<a href="javascript:warp()"><img src="/images/OnTheMiningMap/rilogo.png" name="targetimage" border="2"></a>
<img src="http://www.the-rational-investor.com/images/OnTheMiningMap/<?echo("$map_version");?>"
BORDER="2"
usemap="#mymap">
<MAP NAME="mymap">
<area shape="rect" coords="<?echo("$rilogo_x_start");?>,<?echo("$rilogo_y_start");?>,<?echo("$rilogo_x_end");?>,<?echo("$rilogo_y_end");?>" onMouseover="doChanges(0)" href="http://www.therationalinvestor.ca/" rel="nofollow" target="_blank" Title="The Rational Investor" alt="The Rational Investor">
<area shape="rect" coords="<?echo("$autism_x_start");?>,<?echo("$autism_y_start");?>,<?echo("$autism_x_end");?>,<?echo("$autism_y_end");?>" onMouseover="doChanges(1)" href="http://www.autismbc.ca/" rel="nofollow" target="_blank" Title="Autism Society of BC" alt="Autism Society of British Columbia">
<area shape="rect" coords="<?echo("$britania_x_start");?>,<?echo("$britania_y_start");?>,<?echo("$britania_x_end");?>,<?echo("$britania_y_end");?>" onMouseover="doChanges(2)" href="http://www.britaniaminingmuseum.ca/" rel="nofollow" target="_blank" Title="Britannia Mining Museum" alt="Britannia Mining Museum">
<area shape="rect" coords="<?echo("$sable_x_start");?>,<?echo("$sable_y_start");?>,<?echo("$sable_x_end");?>,<?echo("$sable_y_end");?>" onMouseover="doChanges(3)" href="http://sableresources.com/" rel="nofollow" target="_blank" Title="Sable Resources - Shasta" alt="Sable Resources - Shasta">
<area shape="rect" coords="<?echo("$northgate_x_start");?>,<?echo("$northgate_y_start");?>,<?echo("$northgate_x_end");?>,<?echo("$northgate_y_end");?>" onMouseover="doChanges(4)" href="http://northgateexploration.com/Home/default.aspx" rel="nofollow" target="_blank" Title="Northgate Resources - Kemess South" alt="Northgate Resources - Kemess South">
<area shape="rect" coords="<?echo("$thompson_x_start");?>,<?echo("$thompson_y_start");?>,<?echo("$thompson_x_end");?>,<?echo("$thompson_y_end");?>" onMouseover="doChanges(5)" href="http://www.thompsoncreekmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Thompson Creek Metals - Endako" alt="Thompson Creek Metals - Endako">
<area shape="rect" coords="<?echo("$imperial_x_start");?>,<?echo("$imperial_y_start");?>,<?echo("$imperial_x_end");?>,<?echo("$imperial_y_end");?>" onMouseover="doChanges(6)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Huckleberry" alt="Imperial Metals - Huckleberry">
<area shape="rect" coords="<?echo("$westerncoal_x_start");?>,<?echo("$westerncoal_y_start");?>,<?echo("$westerncoal_x_end");?>,<?echo("$westerncoal_y_end");?>" onMouseover="doChanges(7)" href="http://www.westerncoal.com/" rel="nofollow" target="_blank" Title="Western Coal - Brule, Dillon, Perry Creek" alt="Western Coal - Brule, Dillon, Perry Creek">
<area shape="rect" coords="<?echo("$peaceriver_x_start");?>,<?echo("$peaceriver_y_start");?>,<?echo("$peaceriver_x_end");?>,<?echo("$peaceriver_y_end");?>" onMouseover="doChanges(8)" href="http://www.peacerivercoal.com/" rel="nofollow" target="_blank" Title="Peace River Coal" alt="Peace River Coal">
<area shape="rect" coords="<?echo("$teckcoal1_x_start");?>,<?echo("$teckcoal1_y_start");?>,<?echo("$teckcoal1_x_end");?>,<?echo("$teckcoal1_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Fording River" alt="Teck Coal Fording River">
<area shape="rect" coords="<?echo("$teckcoal2_x_start");?>,<?echo("$teckcoal2_y_start");?>,<?echo("$teckcoal2_x_end");?>,<?echo("$teckcoal2_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Greenhills" alt="Teck Coal Greenhills">
<area shape="rect" coords="<?echo("$teckcoal3_x_start");?>,<?echo("$teckcoal3_y_start");?>,<?echo("$teckcoal3_x_end");?>,<?echo("$teckcoal3_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Line Creek" alt="Teck Coal Line Creek">
<area shape="rect" coords="<?echo("$teckcoal4_x_start");?>,<?echo("$teckcoal4_y_start");?>,<?echo("$teckcoal4_x_end");?>,<?echo("$teckcoal4_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Elkview" alt="Teck Coal Elkview">
<area shape="rect" coords="<?echo("$teckcoal5_x_start");?>,<?echo("$teckcoal5_y_start");?>,<?echo("$teckcoal5_x_end");?>,<?echo("$teckcoal5_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Coal Mountain" alt="Teck Coal Coal Mountian">
<area shape="rect" coords="<?echo("$imperial2_x_start");?>,<?echo("$imperial2_y_start");?>,<?echo("$imperial2_x_end");?>,<?echo("$imperial2_y_end");?>" onMouseover="doChanges(10)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Mount Polley" alt="Imperial Metals - Mount Polley">
<area shape="rect" coords="<?echo("$teck_x_start");?>,<?echo("$teck_y_start");?>,<?echo("$teck_x_end");?>,<?echo("$teck_y_end");?>" onMouseover="doChanges(11)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck - Huckleberry" alt="Teck - Huckleberry">
<area shape="rect" coords="<?echo("$taseko_x_start");?>,<?echo("$taseko_y_start");?>,<?echo("$taseko_x_end");?>,<?echo("$taseko_y_end");?>" onMouseover="doChanges(12)" href="http://www.tasekomines.com/tko/Home.asp" rel="nofollow" target="_blank" Title="Taseko - Gibralar" alt="Taseko - Gibralar">
<area shape="rect" coords="<?echo("$roca_x_start");?>,<?echo("$roca_y_start");?>,<?echo("$roca_x_end");?>,<?echo("$roca_y_end");?>" onMouseover="doChanges(13)" href="http://www.rocamines.com/s/Home.asp" rel="nofollow" target="_blank" Title="Roca - Max" alt="Roca - Max">
<area shape="rect" coords="<?echo("$breakwater_x_start");?>,<?echo("$breakwater_y_start");?>,<?echo("$breakwater_x_end");?>,<?echo("$breakwater_y_end");?>" onMouseover="doChanges(14)" href="http://www.breakwater.ca/" rel="nofollow" target="_blank" Title="Breakwater - Myra Falls" alt="Breakwater - Myra Falls">
<area shape="rect" coords="<?echo("$hillsborough_x_start");?>,<?echo("$hillsborough_y_start");?>,<?echo("$hillsborough_x_end");?>,<?echo("$hillsborough_y_end");?>" onMouseover="doChanges(15)" href="http://www.hillsboroughresources.com/" rel="nofollow" target="_blank" Title="Hillsborough - Quinsam" alt="Hillsborough - Quinsam">
</MAP>
</body>
My question is, how can I get three different images (company logo, weekly price chart and monthly price chart - all of which are in an image folder on my server) to change on this one mouseover event. I tried replicating the function three times and altering each function's name but that ended up screwing the whole thing up. Any thoughts/suggestions would be greatly appreciated, Brian I'm using code based on these functions to fade images up from black as part of a slideshow: Code: function fade_down(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 100; i >= 0; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function fade_up(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function changeOpac(opacity, id) {
//change the opacity for different browsers
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks. Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need. Here is the code relevant to my issue: HTML: Code: <div id="faqBox"> <h1 id="faqHeader"><u>F.A.Q's</u></h1> <ul> <li><a href="#" onclick="">What is the purpose of this website?</a></li> <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li> <li><a href="#">Why was this award created?</a></li> <li><a href="#">How do we nominate somebody?</a></li> <li><a href="#">How are people presented with this award?</a></li> </ul> </div> <div id="faqInfoBox"> <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" /> </div> CSS: Code: #faqInfoBox {width: 40%;
border: 5px ridge;
height: 310px;
background: #606626;
float: right;
margin-right: 3%;}
#faqBox ul li{font-family: trebuchet ms;
line-height: 30px;
list-style-type: square;}
JS: Code: var imgArray = new Array(4);
imgArray[0] = 'images/content1.png';
imgArray[1] = 'images/content2.png';
imgArray[2] = 'images/content3.png';
imgArray[3] = 'images/content4.png';
imgArray[4] = 'images/content5.png';
var currIndex = 0;
function imgChange(that)
{
if(currIndex < myImages.length - 1) {
that.src = myImages[++currIndex];
}else {
currIndex = 0;
that.src = myImages[currIndex];
}
}
The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look. I don't want to be fed the answer but just some pointers/tips on what I could do. I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created). I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me. Thank you very much in advance if anyone can help. Regards, LC. I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find (so please forgive me if this has been posted somewhere else...) I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page. I REALLY hope that made sense. Someone please help me! |
|||||||