Slyck.com
 
Slyck Chatbox - And More

Need help with "onmouse" stuff(web-design?)

A place for developers and programmers of file-sharing software to discuss issues.
Forum rules
PLEASE READ BEFORE POSTING: Slyck Forum Rules

Need help with "onmouse" stuff(web-design?)

Postby TDO » Sun Jun 05, 2005 10:38 am

Heya - I need some help with web-design stuff(if that's what it's called).

I need this:

1)There's an image, but once there's a mouse over it it changes into another image.
2)On another image, I need a text displayed on the mouse once it's over that image.

The third thing I need is probably more complicated, I need this "send-mail" form... Like, the person types his email into the web page, and his return address, presses on send and wallah, as if by magic it's sent.



I'm gonna go see how it can be done myself - but I need it max untill tommow - so I though I'll post it here, since I know some falks helped me back with other web-design stuff some time ago.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Re: Need help with "onmouse" stuff(web-design?)

Postby Drake » Sun Jun 05, 2005 11:38 am

If you have Dreamweaver, it can create the mouseover effects for you. I have the code somewhere...once I find it I'll post it.

As for the form, if you want it to be sent automatically, your host has to support php, cgi, asp, coldfusion or a similar language. This can't be done with html or javascript.
User avatar
Drake
 
Posts: 2058
Joined: Tue Aug 05, 2003 12:56 pm
Location: Meepos (where charging for MP3s is illegal!)

Postby TDO » Sun Jun 05, 2005 11:47 am

Ok, forget the form then ;).

I've found some "onmouse event" triggers with DHTML or somthing... Gonna try soon.

Yeah - the girl for whom I do this(there's always a woman involved - otherwise I'll never take web-design jobs) tried dreamweaver - it's totally messed up and doesn't work - plus, I don't have dreamweaver on my comp - and would rather to know what the code does - since I'll be explaining it to her...

10x Drake ;).
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby Renegade » Sun Jun 05, 2005 1:15 pm

Haven't tested it and it's a bit simplified, but should hopefully put you on the right track

Code: Select all
<html>
<head>
<title>rollover demo</title>
<script type="text/javascript">
function over(a){
 document.getElementById('imageroll' + a).src = "rolloverimg"+a+".jpg";
}
function out(a){
 document.getElementById('imageroll' + a).src = "mainimg"+a+".jpg";
}
</script>
</head>
<body>
 <!-- Preloads image for rollover -->
 <img style="width:1px;height:1px;position:visible:false" src="rolloverimg1.jpg" />
 <!-- Main image which will change when rolled over -->
 <img id="imageroll1" src="mainimg1.jpg" onmouseover="over(1)" onmouseout="out(1)" />
</body>
</html>
Renegade
 
Posts: 971
Joined: Sat May 29, 2004 12:37 am

Postby TDO » Sun Jun 05, 2005 1:51 pm

Thanks a lot - But I've just foundit myself :) - though the one I've found is a bit different:




<SCRIPT type=text/javascript>
<!--

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>

<STYLE type=text/css>.showrollover {
FONT-SIZE: 60%; FONT-FAMILY: sans-serif
}
</STYLE>

<META content="MSHTML 6.00.2900.2627" name=GENERATOR></HEAD>
<BODY>






<TD><A onmouseover="rollover('home')" onmouseout="rollout('home')"
href="http://www.idocs.com/tags/images/rollover_target.html"><IMG
height=130 alt="Home Page"
src="Idocs Guide to HTML Rollover Images The Tag_files/home_out.gif"
width=115 border=0 name=home></A>
<SCRIPT type=text/javascript>
<!--
setrollover("Idocs Guide to HTML Rollover Images The Tag_files/home_over.gif");
//-->
</SCRIPT>
</TD></TR></TBODY></TABLE>
<P>




I just did what I usually do - go to some place with a "guide" on the subject - and steal the example :).

Now all I have left is a text message above the image rollover sort of thing...



Though - I'd rather use your code - smaller, but I can't get it to work :(.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby Renegade » Sun Jun 05, 2005 2:19 pm

Just tested it, works fine, only thing to note is the image names, the way I've done it, as i said, is simplistic.

Call your first initial image mainimg1.jpg and the one to display when rolled over rolloverimg1.jpg, and dump my code in an html file.

There is one major issue, that its only really easy to use with small numbers of images. To add more images, create new ones called mainimg2.jpg etc.. you get the idea, and copy and paste the

Code: Select all
<!-- Preloads image for rollover -->
 <img style="width:1px;height:1px;position:visible:false" src="rolloverimg2.jpg" />
 <!-- Main image which will change when rolled over -->
 <img id="imageroll2" src="mainimg2.jpg" onmouseover="over(2)" onmouseout="out(2)" />


changing the 1's to 2's.

Works fine for me in IE and FF anyway
Renegade
 
Posts: 971
Joined: Sat May 29, 2004 12:37 am

Postby TDO » Sun Jun 05, 2005 5:03 pm

:) - thanks for the help - I've already done everything - no further help is needed in either of the requests - thanks :).
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am


Return to Developers Forum

Who is online

Users browsing this forum: No registered users and 2 guests

© 2001-2008 Slyck.com