|
JavaScript - Link Rollover Problem
This JavaScript is linked externally and was written to add a hover action to navigation links. It downloads quick and works great, however, the code is written to apply to all image links on the page. I need a declaration that will make the action apply Only to the navigation links. Not sure the best approach here. getElementById, or another var? Any insight is greatly appreciated.
JavaScript: window.onload = rolloverInit; function rolloverInit() { for (var i=0; i<document.images.length; i++) { if (document.images[i].parentNode.tagName == "A") { setupRollover(document.images[i]); } } } function setupRollover(thisImage) { thisImage.outImage = new Image(); thisImage.outImage.src = thisImage.src; thisImage.onmouseout = rollOut; thisImage.overImage = new Image(); thisImage.overImage.src = "images/navbar/" + thisImage.id + "_ro.jpg"; thisImage.onmouseover = rollOver; } function rollOut() { this.src = this.outImage.src; } function rollOver() { this.src = this.overImage.src; } HTML(intended for this application): <div id="navigation"> <ul> <li><a href="index.html" target="_self" class="nav_home"><img src="images/navbar/home_tab.jpg" alt="home_tab" id="home_tab" /></a></li> <li><a href="aboutus.html" target="_self" class="nav_about"><img src="images/navbar/about_tab.jpg" alt="about_tab" id="about_tab" /></a></li> <li><a href="quartets.html" target="_self" class="nav_quartet"><img src="images/navbar/quartets_tab.jpg" alt="quartets_tab" id="quartets_tab" /></a></li> <li><a href="events_calender.html" target="_self" class="nav_event"><img src="images/navbar/events_tab.jpg" alt="events_tab" id="events_tab" /></a></li> <li><a href="members.html" target="_self" class="nav_members"><img src="images/navbar/members_tab.jpg" alt="members_tab" id="members_tab" /></a></li> </ul> </div> Similar TutorialsI'm having an issue with the main logo in the navigation bar, each time I hover over it, it searches for the rollover image. I only want this javascript function to be activated over the div "navigation_menu" here's the html code for the logo <div id="nav"> <a href="index.php"> <img src="images/logo_05.jpg" alt="Home Page"/></a> </div><!-- nav --> here's the javascript code that's causing the problems window.onload = rolloverInit; function rolloverInit() { var nav = document.getElementById("navigation_menu"); for (var i=0; i<nav.images.length; i++) { if (nav.images[i].parentNode.tagName == "A") { setupRollover(nav.images[i]); } } } any help would be very appreciated Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! I've been designing a website and I recently made a few changes to it and now the home button doesnt work properly and I cant figure out why. I think it is javascript related. My problem is when you click on any category in the home page. On the next page the 'Home' link doesnt work. It clearly links back to 'index.php' but it just refreshes the page. What is even wierder is that when you try and manually retype the URL to get to index.php it still doesnt go there it just refreshes the page. I think it may be to do with a javascript redirect script I put in to prevent frames redirecting my parent window but I dont know why it causes the home link to not work properly Any ideas? To see an example of what I mean its on http://whatshalliwatch.net I have a small .png on my site. I want to view at 250% when I rollover it. Is there a way to have the 250% .png be centered vertically and horizontally where the 100% without making the 100% .png 250% bigger (ex. extra white space). Any recommendations for other ways? Okay so I am fairly new to Javascript and am having some difficulties getting this rollover to work. I've gotten this rollover code to work in multiple other pages and for some reason it just wont work for this page. The code is below, basically I have three buttons on the page that need to have a rollover effect to display an alternate image for each button, I started small to try and get just the first one to work and have not had any luck. Tried three different browsers, nothing. Any advice will be greatly appreciated. Code:
<html>
<head>
<title>Ski Montana</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
if (document.images) {
photosUp = new Image
photosDown = new Image
photosUp.src = 'photosup.gif'
photosDown.src = 'photosdown.gif'
}
var images = new Array(3);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[0].src ="bannerad1.jpg"
images[1].src ="bannerad2.jpg"
images[2].src ="bannerad3.jpg"
var outElm;
var currentImageIndex = 0;
var maxImageIndex = images.length-1;
function cycle(){
if (outElm) {
outElm.src = images[currentImageIndex].src;
++currentImageIndex;
if (currentImageIndex > maxImageIndex) {
currentImageIndex = 0;
}
}
}
function initImageCycler(elmID){
outElm = document.getElementById(elmID);
if (outElm) {
setInterval("cycle()", 2000);
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" onload="initImageCycler('adBanner');">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="15" height="6" valign="top"></td>
<td width="103" height="6" valign="top"></td>
<td width="10" height="6" valign="top"></td>
<td width="9" height="6" valign="top"></td>
<td width="176" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="96" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="209" height="6" valign="top"></td>
<td width="11" height="6" valign="top"></td>
<td width="6" height="6" valign="top"></td>
<td width="133" height="6" valign="top"></td>
</tr>
<tr>
<td width="15" height="89" valign="top"></td>
<td width="103" height="89" valign="top"></td>
<td width="10" height="89" valign="top"></td>
<td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68" id="adBanner" alt="Ad Banners" /></td>
<td width="6" height="89" valign="top"></td>
<td width="133" height="89" valign="top"></td>
</tr>
<tr>
<td width="15" height="108" valign="top"></td>
<td width="103" height="108" valign="top"></td>
<td width="10" height="108" valign="top"></td>
<td width="9" height="108" valign="top"></td>
<td width="483" height="222" colspan="5" rowspan="3" valign="top">
<h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
<h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West
and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
<td width="11" height="108" valign="top"></td>
<td width="6" height="108" valign="top"></td>
<td width="133" height="108" valign="top"></td>
</tr>
<tr>
<td width="15" height="2" valign="top"></td>
<td width="103" height="2" valign="top"></td>
<td width="10" height="2" valign="top"></td>
<td width="9" height="2" valign="top"></td>
<td width="11" height="2" valign="top"></td>
<td width="6" height="2" valign="top"></td>
<td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
</tr>
<tr>
<td width="15" height="112" valign="top"></td>
<td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
<td width="10" height="112" valign="top"></td>
<td width="9" height="112" valign="top"></td>
<td width="11" height="112" valign="top"></td>
<td width="6" height="112" valign="top"></td>
</tr>
<tr>
<td width="15" height="46" valign="top"></td>
<td width="10" height="46" valign="top"></td>
<td width="9" height="46" valign="top"></td>
<td width="176" height="46" valign="top"></td>
<td width="97" height="46" colspan="2" valign="top"><a href="photos.htm" onMouseover="document.rollover.src=photosDown.src" onMouseout="document.rollover.src=photosUp.src"><img name="rollover" src="photosup.gif" border=0></a></td>
<td width="1" height="46" valign="top"></td>
<td width="209" height="46" valign="top"></td>
<td width="11" height="46" valign="top"></td>
<td width="6" height="46" valign="top"></td>
<td width="133" height="46" valign="top"></td>
</tr>
<tr>
<td width="15" height="44" valign="top"></td>
<td width="103" height="44" valign="top"></td>
<td width="10" height="44" valign="top"></td>
<td width="9" height="44" valign="top"></td>
<td width="176" height="44" valign="top"></td>
<td width="1" height="44" valign="top"></td>
<td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm" onMouseover="document.rollover.src=resortsdown.src" onmouseout="document.rollover.src=resortsup.src"><img src="resortsup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="209" height="44" valign="top"></td>
<td width="11" height="44" valign="top"></td>
<td width="6" height="44" valign="top"></td>
<td width="133" height="44" valign="top"></td>
</tr>
<tr>
<td width="15" height="49" valign="top"></td>
<td width="103" height="49" valign="top"></td>
<td width="10" height="49" valign="top"></td>
<td width="9" height="49" valign="top"></td>
<td width="176" height="49" valign="top"></td>
<td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm" onmouseover="document.rollover.src=contactusdown.src" onmouseout="document.rollover.src=contactusup.src"><img src="contactusup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="1" height="49" valign="top"></td>
<td width="209" height="49" valign="top"></td>
<td width="11" height="49" valign="top"></td>
<td width="6" height="49" valign="top"></td>
<td width="133" height="49" valign="top"></td>
</tr>
<tr>
<td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
<td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
<td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
<td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
<td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
<td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
<td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
<td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
</tr>
</table>
</body>
</html>
I have a div in my HTML that that when rolled over reveals an image. I can't figure out how to place a random image from a set of 5 images to appear in the background of that div when it is rolled over again. Please help me! Hello, my first post here; and i am new to javascript i actually am just starting to learn the concept of javascript; and I am wondering.... if certain aspects of a website are made by using javascript such as the part on facebook "My Account"; where on click it opens a "window" with options. OR, on amazon where the menu items pop out on rollover;; can someone please tell me if they are acomplishing that by using javascript? thank you and i appreciate who ever is reading this. I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page. Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
var rollOvers = document.getElementsByClassName("rollover");
for(var i=0; i<rollOvers.length; i++){
setupRollover(rollOvers[i]);
}
}
function setupRollover(thisImage){
//UP
thisImage.outImage = new Image();
thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
thisImage.onerror = thisImage;
thisImage.onmouseout = rollOut;
//OVER
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
thisImage.onerror = rollOut;
thisImage.onmousedown = rollClick;
//DOWN
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
thisImage.onerror = rollOut;
thisImage.onmouseover = rollOver;
thisImage.onmouseup = rollOver;
}
function rollOver() {
this.src = this.overImage.src;
}
function rollOut() {
this.src = this.outImage.src;
}
function rollClick() {
if(lastClick){
lastClick.onmouseout = rollOut;
lastClick.src = this.outImage.src;
}
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;
What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! Hi, I am needing some help with the mootools script. I have uploaded a test page at http://74.52.32.68/~tempcom/slider/ Here is what I am attempting to do. When I click on one of the items (say Landscapes), I want some corresponding text to appear in the green box above. Is this possible? Would it be a javascript? Any sample codes or assistance would be greatly appreciated. Thanks in advance! Currently i have rollover images when click on active a hide show div tag with the css property. the problem is that i want to keep the buttons on active state till someone clicks on another button then the button returns to a down state and the new button that was click on stay up. Code: <script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4', 'a5','a6');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
please help Hey guys, I'm having a complete nightmare with this... If you see http://bit.ly/i5TwmL you can see what I am working on. In the services section with the 8 images you can see how I am TRYING to make the site work. The idea is that when scrolling over an image the related text will appear in the right column. This is to happen for each image with different text for each. The problem (as I'm sure is quite clear from using the site) is that there is a lot of jumping. When an image is not selected the images should stay in 2 columns with text to the right. "Scroll over the images for a brief description of the services we provide." I doubt I'm describing this well but this is all new to me... I have used javascript to control these rollovers. Quote: <script type="text/javascript"> //<![CDATA[ function toolTip(txt,top,left) { var el=document.getElementById('foo'); var text=new Array(); text[1]="<h2>Diamond Core Drilling</h2><p>For vertical or horizontal drilling where a precise circular opening is required. This method is used to create openings for mechanical, electrical, heating and ventilation installations and is also ideal for creating holes for routing cables, placing anchor bolts, installing load carrying devices or for concrete sample analysis. The circumference of a diamond drilled opening can be from 10mm to 1 metre or more. Drilling depths are virtually unlimited using barrel extensions. Stitch drilling is a technique which involves drilling a series of 107mm diameter holes to form openings of any size.</p>"; text[2]="<p>Scroll over the images for a brief description of the services we provide.<br><br /></p><h2>WALL SAWING</h2><p>By making a series of passes along the length being cut, wall saws are used to cut through walls for door or window openings. These can also be used to form openings on floors for stairways, lifts, etc. and can be used inverted. Cutting depths are up to 700mm</p><h2>FLOOR SAWING</h2><p>The floor saw is a very rapid cutting machine and is ideal for ground floors, warehouses, roads and runways. It enables efficient repairs, alterations and groundworks to be carried out. Cutting depths can reach 400mm and the machine can be powered by diesel, petrol, three phase electricity or gas.</p><br /><h2>CHAIN SAWING</h2><p>A concrete chain saw allows for deep plunge-cutting and corners with no over-cuts. This is useful for windows, door openings and small mechanical openings. There a various applications associated with chain sawing and it can be utilised for a variety of materials including brick, stone and reinforced concrete.</p><br /><br /><h2>WIRE SAWING</h2><p>Similar to the method of wall sawing although in place of a blade are a series of pulley wheels which guide the diamond wire 6mm in diameter. This method is ideal for removing large concrete or masonry sections with virtually no noise or vibration to the structure.</p>"; text[3]="<h2>Chasing</h2><p>Neat parallel channels are cut for housing of electrical cables within a wall or floor. All our chasing plant comes supplied with dust extraction as standard.</p>"; text[4]="<h2>Controlled Demolition</h2><p>Removal of structures or individual walls and removal of waste from site as required.<br><br><h2>Robotic Demolition</h2><p>A fast, safe and efficient method of controlled demolition using three phase driven machines remotely controlled by an operator eliminating any HAVS issues associated with traditional methods of demolition.<br><br><h2>Concrete Bursting</p></h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>"; text[5]="<h2>Concrete Busting</h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>"; text[6]="<h2>Concrete Crunching</h2><p>Used for walls, concrete slabs or masonry crunching is a fast, controlled method of demolition and relatively dust, vibration and noise free.</p>"; text[7]="<h2>Anchor Installation & Pull Testing</h2><p>The drilling and installation of mechanical or resin anchors and the subsequent pull off testing in a wide range of applications such as starter bars, holding down bolts, crane bases, hand rails and a myriad of other applications.</p>"; text[8]="<h2>Lintel Installation & Steel Erection</h2><p>The installation of steel or concrete lintels over any size of new door or window opening after we have diamond drilled (temporarily securing the structure above) then diamond cut to form the openings.<br><br>Steel erection is a practice which involves the cutting and removal of large sections of reinforced concrete walls or floors. Acudrill can fabricate, supply and install the steelwork to the requirements of the structural engineer.</p>"; el.innerHTML=text[txt]; el.style.top=top+"px"; el.style.left=left+"px"; el.style.display="block"; document.onmouseout=function() { el.style.display="none"; } } //]]> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } </script> <div id="foo"> <p>Scroll over the images for a brief description of the services we provide.</p> </div> <div class="g292" onmouseover="toolTip(1)"> <div> <img src="images/drilling.png" border="0" id="Image55" /></a></li></ul> </div> <h2>DIAMOND core drilling</h2> </div> <div class="g292" onmouseover="toolTip(2)"> <img src="images/sawing.png" border="0" id="Image50" /></a> </li></ul> <h2>DIAMOND sawing</h2> </div> <div class="g292" onmouseover="toolTip(3)"> <img src="images/chasing.png" border="0" id="Image50" /></a> <h2>chasing</h2></div> <div class="g292" onmouseover="toolTip(4)"> <img src="images/demolition.png" border="0" id="Image50" /></a> <h2>controlled demolition</h2></div> <div class="g292" onmouseover="toolTip(5)"> <img src="images/busting.png" alt="" /> <h2>concrete busting</h2></div> <div class="g292"onmouseover="toolTip(6)"> <img src="images/crunching.png" border="0" id="Image57" /></a> <h2>concrete crunching</h2></div> <div class="g292" onmouseover="toolTip(7,50,185)"> <img src="images/anchor.png" alt="" /> <h2>anchor installation & pull testing</h2></div> <div class="g292" onmouseover="toolTip(8)"> <img src="images/lintel.png" border="0" id="Image57" /></a> <h2>lintel installation & Steel erection</h2></div> I am slightly worried about what will happen if the user has javascript disabled. Is there a way around this? I have tried using css to control this a completely scrap the javascript http://code.hyperspatial.com/all-cod...rollover-text/ but I cannot work out how to position the text in the div. Please help or advise. Many many thanks! OK, I want several of my images on my webpage to change when the user hovers over the graphic. I created the js and it works fine. However, now all of my (linked) images change when I hover over them. I know what's causing this ( the Code: ( document.images[i].parentNode.tagName =="A" ) part), but not sure what the best way to fix it would be. Any advice? window.onload=rolloverInit; function rolloverInit( ) { for ( var i=0; i<document.images.length; i++) { if ( document.images[i].parentNode.tagName =="A" ) { setupRollover( document.images[i]); } } } function setupRollover(thisImage) { thisImage.outImage =new Image(); thisImage.outImage.src= thisImage.src; thisImage.onmouseout=function() { this.src=this.outImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg"; thisImage.onmouseover= function( ) { this.src=this.overImage.src; } } [/CODE] OK, so I created my nav bar in Photoshop. I have a off image and on image. So, now I create a js file that displays the on image when they are hovering over that item, etc. Problem is, the js file does it for all images. For example, if the user hovers over the header banner, it tries to look for a different image. How can I update the following javascript to have it do that only in the nav bar. Code: window.onload=rolloverInit;
function rolloverInit( ) {
for ( var i=0; i<document.images.length; i++) {
if ( document.images[i].parentNode.tagName =="A" ) {
setupRollover( document.images[i]);
}
}
}
function setupRollover(thisImage) {
thisImage.outImage =new Image();
thisImage.outImage.src= thisImage.src;
thisImage.onmouseout=function() {
this.src=this.outImage.src;
}
thisImage.overImage = new Image();
thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg";
thisImage.onmouseover= function( ) {
this.src=this.overImage.src;
}
}
01) I would like to rollover (onmouseover?) a button that is a video and have the video (button) play. (A 5 sec video that stops at end) 02) On rolloff (onmouseoff?) the same button I would like it to rewind to the beginning for next rollover. 03) I would like to add more of these "Video Button Rollovers" to the same website page in the future. I would like to use DreamWeaver CS4, and stay away from flash for more accessibility and less memory intensive overhead. (obviously no control-bar for video) ----- I have all the parts to this to try a variety of solutions. ----- -The video is a box with untied string on a white background. - When played a person fades-on and ties the string into a bow. (white background matches website background) ----- Parts: 01) video from untied box to tied box with person .mov 02) image of first frame of video .jpg 03) video from untied box to tied box with person to person fade-off and untied box .mov 04) video of tied box with person to person fade-off and untied box.mov ----- The parts will be on this website: http://mydata.salve.edu/emersonb/g2/media.html Thanks Hi all I have this rollover script (original done by Old Pedant) which I have modified making it 5 sets of 2 images. Althogh it seems to work I have a feeling it's not the best way of doing it hahahaha It seems clumsy to me (and i'm no coder hahaaha) Could it be made more concise. (or just made correct) Would really appreciate any help or positive comments. Code: <script type="text/javascript">
function linkOver(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("Off_1.png","On_1.png");
image.src = image.src.replace("Off_2.png","On_2.png");
image.src = image.src.replace("Off_3.png","On_3.png");
image.src = image.src.replace("Off_4.png","On_4.png");
image.src = image.src.replace("Off_5.png","On_5.png");
}
function linkOut(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("On_1.png","Off_1.png");
image.src = image.src.replace("On_2.png","Off_2.png");
image.src = image.src.replace("On_3.png","Off_3.png");
image.src = image.src.replace("On_4.png","Off_4.png");
image.src = image.src.replace("On_5.png","Off_5.png");
}
</script>
</head>
I have 5 of these: Code: <body>
<div id="megaanchor" onmouseover="linkOver(this), callSecondFunction('soldier',50,40,200);" onmouseout="linkOut(this);" ><img src="images/image_Off.png" alt="" border="0" />
</body>
Hey, Recently I've been looking into disjointed rollovers but for the life of me I can't seem to find a way to implement what I want to do. What I want to do is when I hover a link, It shows the image associated with the link in a div or element that I've pulled via mysql and php. Also when the page is loaded the first results image should populate the div before any interaction with the webpage whatsoever. My current code the first image doesn't show a default image from the database because it uses css and from what I've read so far It looks like I need to use javascript too so any help welcomed and appreciated in getting me going in the right direction. My current testing code is below: Code: <style type="text/css">
#linksDiv{border:1px #000 solid; width:300px;}
ul#links a {display: block; width:100px;}
ul#links a:hover {color:#fff; background:#AAA;border-right:5px double white;}
ul#links a img {height: 0; width: 0; border-width: 0;}
ul#links a:hover img {position: absolute; top: 37px; left: 180px; height: 100px; width: 100px; border:1px #000 solid;}
#default
</style>
<?php
$dbhost = 'localhost';
$dbuser = '***';
$dbpass = '***';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');
$dbname = 'testimg';
mysql_select_db($dbname);
echo '<div id="linksDiv"><ul id="links">';
$sql = mysql_query("SELECT * FROM tbimages") or die ('Error: '.mysql_error ());
while($row = mysql_fetch_array($sql)) {
$name = $row['name'];
$img = $row['image'];
echo '<a href="#">'.$name.'<img src="'.$img.'" title="'.$name.'" /></a>';
}
echo'</ul></div>';
?>
Hi, I have a a-z brand menu on my site. I want the user to be able to select a letter and a list of brands appear. The problem I have is that I want the layer to appear at the position of the mouse (from the top left). I have this working fine but then when you rollover a link (brand) within the layer div it reactivates the call command and re positions the layer to the mouse again. Please Please help. My code is as follows; POSITION CODE; Code: var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+5) + "px";
d.style.top = (cY+5) + "px";
}
TOGGLE HIDE SHOW LAYER; Code: function toggle_visibility(id) {
var e = document.getElementById(id);
AssignPosition(e);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
EXAMPLE OF A-Z MENU; Code: <a href="#" onclick="toggle_visibility('uniquename0');">A</a>
EXAMPLE OF LAYER TO DISPLAY WHICH CONTAINS THE OFFENDING LINKS; Code: <div id="uniquename0" style="border-style: solid; padding: 5px; display: none; position: absolute; background-color: white; left: 482px; top: 428px;" onmouseout="toggle_visibility('uniquename0');">
<a href="Manufacturer-view.asp?ManID=1">All American EFX <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
</div>
Thank you Dan |
|||||||