The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Please help with code!
xxkasperxx
post Apr 30 2011, 08:27 PM
Post #1


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
i am trying to create a rollover effect with my menu bar, i made the menu bar in photoshop, i used layer styles, to make a rollover, and normal button. i have it saved in my "images" file as "about.png" and "about_rollover.png"

i need some code that will make it change when you put ur ouse over it.

any type of code will work!

Please help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Apr 30 2011, 10:02 PM
Post #2


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147
Hey,
Here is some java-script that I came across for doing just that... Add this to the head:
CODE

<script type="text/javascript">
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_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_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>

You'r opening body tag would then look like this:
CODE

<body onload="MM_preloadImages('about.png')">
<!-- Add more by just adding:  ,'image2.png' etc. -->

You then apply it like this in the body:
CODE

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_rollover.png','','about.png',1)"><img src="about_link" name="About" border="0" id="About" /></a>


I just came across this code and have not tested it.

Hope this helps!

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Apr 30 2011, 11:44 PM
Post #3


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
it didnt work, unless im doing it wrong. someone plz help
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Apr 30 2011, 11:49 PM
Post #4


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147
Will you post you'r whole (HTML) file?
That way we can see what want wrong.
I do know this method does work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 1 2011, 04:28 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
That's a typical DreamWeaver script. Perhaps http://www.dynamicdrive.com/dynamicindex15/domroll.htm will make things clearer on how it works.

Besides, you don't need javascript anymore to do image swaps these days, use CSS instead. Only then, the image should be a background-image, using a sprite. See http://wellstyled.com/css-nopreload-rollovers.html .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post May 1 2011, 08:51 AM
Post #6


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
My HTML code



CODE

<html>
<head>
<script type="text/javascript">
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_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_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>
<title>ream-template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="MM_preloadImages('about.png')">
<!-- Add more by just adding:  ,'image2.png' etc. -->
<!-- Save for Web Slices (ream-template.psd - Slices: 01, 02, 08, 09, about, calendar, donate, our_vision, photos) -->
<center>
<table id="Table_01" width="800" height="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
        
            <img src="images/index_rollover.png" width="800" height="197" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/index_rollover-02.png" width="800" height="19" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_rollover.png','','about.png',1)"><img src="images/about.png" name="About" border="0" width="134" height="88" id="About" alt=""/></a></td>
        <td>
            <img src="images/our_vision.png" width="196" height="88" alt=""></td>
        <td>
            <img src="images/calendar.png" width="170" height="88" alt=""></td>
        <td>
            <img src="images/photos.png" width="144" height="88" alt=""></td>
        <td>
            <img src="images/donate.png" width="156" height="88" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/index_rollover-08.png" width="800" height="7" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/index_rollover-09.png" width="800" height="689" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post May 1 2011, 11:51 PM
Post #7


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147
Hey,
Try this:
CODE

<html>
<head>
<script type="text/javascript">
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_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_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>
</head>
<body onLoad="MM_preloadImages('about_rollover.png')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About','','about_rollover.png',1)"><img src="about.png" name="About" width="500" height="300" border="0"></a>
</body>
</html>


I think this should work... Sorry it was my bad... I forgot that it should be "About" not "about.png" and "about_rollover.png" was in the wrong place!
Also, I noticed: You do not close you'r "<center>" tag... I do not advocate this means of centering your elements... But you do have to close that tag.

@Frederiek You'r means of doing it would work fine (if not better) as well... I did not know that this was a "typical DreamWeaver script"... it was just a script that I found (and used). But yes It quite posable could be! huh.gif

Hope this helps! smile.gif

--

This post has been edited by joyful: May 1 2011, 11:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 2 2011, 03:09 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Just for your information, DW-script functions always start with the prefix "MM_", surely an abbreviation of MacroMedia, the original creator of DW which has been taken over by Adobe.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post May 2 2011, 12:01 PM
Post #9


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147
QUOTE(Frederiek @ May 2 2011, 04:09 AM) *

Just for your information, DW-script functions always start with the prefix "MM_", surely an abbreviation of MacroMedia, the original creator of DW which has been taken over by Adobe.

Hey, Thanks Frederiek I did know this. huh.gif

@Yassine Belkaid and Frederiek: You guys are right that (CSS) would be easier... I just had that script (which I now learn is a DW script!) and used it when I wanted a rollover (not that often!), But yes CSS would be a better idea!

xxKasperxx, Do you now understand how to do this (roll over) from Yassine's CSS?

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 3 2011, 02:43 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Oh well, just in case you didn't know...

Have a look at the link to wellstyled in my previous post here at #5.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post May 3 2011, 01:34 PM
Post #11


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
css, isnt working. i am going to try it in a new browser, how do i use it in the html code? or is it just suppolsed to work when i call the css at the beginning?

This post has been edited by xxkasperxx: May 3 2011, 01:37 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post May 3 2011, 04:29 PM
Post #12


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
i went to the library, and checked out a html book and found a roll over code. here is my line of rollover code in my html document. it doenst work though. it just acts as a link.

CODE
<td>
            <a href="images/about_rollover.png" ONMOUSEOVER="document.rollover.src='images/about_rollover.png'"
            ONMOUSEOUT="document.rollover.src='images/about.png'">
            <img src="images/about.png" width="134" height="88" alt=""></a></td>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 3 2011, 06:54 PM
Post #13


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Can you provide the URL (address) of a document that demonstrates the problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 4 2011, 02:26 AM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
The link should point to an HTML page, in this case probably about.html. And the <img> lacks a name value.

See http://www.javascriptkit.com/javatutors/image4.shtml for sample code. Or start at the beginning of their Accessing images & creating image rollovers tutorial.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 08:22 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC