Wrox Programmer Forums
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 1st, 2005, 02:28 AM
Friend of Wrox
  
Join Date: Jul 2004
Posts: 240
Thanks: 0
Thanked 1 Time in 1 Post
Default onmouseover
I have two images. How do you change the image once the cursor goes over the link with the image?

Learning of our true origins.

I feel sorry:

http://www.infowars.com/articles/wor...eknowledge.htm

Foreknowledge of A Natural Disaster
Washington was aware that a deadly Tidal Wave was building up in the Indian Ocean
 
Old February 1st, 2005, 02:45 AM
Authorized User
  
Join Date: Jan 2005
Posts: 23
Thanks: 0
Thanked 0 Times in 0 Posts
Default
hello!

 I am really new to this also, but I beleive you should just be able to use a Rollover Image. It's under Insert -> Interactive Images -> Rollover Image.

It will prompt you to put in your original image, and then the "on"(rollover) image for when the mouse is pointed on it. You can also add in alternate text that will show up when the mouse it on it, and a link...

Hope this helps!!

...just realized you may not be talking about Dreamweaver so this may not help you at all....
 
Old February 2nd, 2005, 06:13 AM
Friend of Wrox
  
Join Date: Dec 2004
Posts: 307
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to Vadivel Send a message via Yahoo to Vadivel
Default
You could do it with onmouseover and onmouseout events. The below code does that ... see whether this helps you:

<html>
<body>
<img src="arrowPrev.gif" Name="imgChange" width="200"/> <br><br>
<A href="test.htm" onmouseover="document.imgChange.src='arrowNext.gif '"
onmouseout="document.imgChange.src='arrowPrev.gif' ">Move your mouse over me ...</a>
</body>
</html>

Best Regards
Vadivel

MVP ASP/ASP.NET
http://vadivel.thinkingms.com
 
Old February 2nd, 2005, 04:40 PM
Friend of Wrox
  
Join Date: Jul 2004
Posts: 240
Thanks: 0
Thanked 1 Time in 1 Post
Default
I found an online example and worked on that and it works now, which is close to your recommendation except it has javascript:
This goes in the <head></head>
Code:
<script language="Javascript">
//<!--Hide script from old browsers
function setpic(x) {
//if (isNaN(x) == true) {
// eval("document['" + x.toLowerCase() + "'].src = '/nav_redarrow.gif'")
//} else {
// eval("document['pic" + x + "'].src = '/nav_redarrow.gif'")
//}
}
function changeIcon(pic,motion) {
if (document[pic].src.indexOf('/nav_redarrow.gif') == -1) {
 if (motion.indexOf("over") != -1) {
  document[pic].src = 'wheel.gif' 
 } else if (motion.indexOf("out") != -1) {
  document[pic].src = 'greywheel.gif' 
 } else {
  document[pic].src = motion
 }   
}
}
function ci(pic,motion) {
if (document[pic].src.indexOf('/nav_redarrow.gif') == -1) {
 if (motion.indexOf("over") != -1) {
  document[pic].src = 'wheel.gif' 
 } else if (motion.indexOf("out") != -1) {
  document[pic].src = 'greywheel.gif' 
 } else {
  document[pic].src = motion
 }   
}
}
//-->
</script>
This goes in the <body></body>
Code:
 <a href='http://n.1asphost.com/wheelofgod/Bibletext.asp'
onMouseOver='changeIcon("TwoTexts","over")' 
onMouseOut='changeIcon("TwoTexts","out")'> 
<img src='greywheel.gif' width='20' height='20' border='0' name='TwoTexts'>
Compare Two Bible Texts</a><br/>
 
<a href='http://n.1asphost.com/wheelofgod/Kjv.asp'
onMouseOver='changeIcon("searchkjv","over")' 
onMouseOut='changeIcon("searchkjv","out")'> 
<img src='greywheel.gif' width='20' height='20' border='0' name='searchkjv'>
Search The Bible</a><br/>
 
<a href='http://n.1asphost.com/wheelofgod/Tripledemo.asp'
onMouseOver='changeIcon("read","over")' 
onMouseOut='changeIcon("read","out")'> 
<img src='greywheel.gif' width='20' height='20' border='0' name='read'>
Read By Chapters</a><br/>
 
<a href='http://n.1asphost.com/wheelofgod/Spokesearch.asp'
onMouseOver='changeIcon("spokesearch","over")' 
onMouseOut='changeIcon("spokesearch","out")'> 
<img src='greywheel.gif' width='20' height='20' border='0' name='spokesearch'>
Search The Bible By Spokes</a><br/>
 
<a href='http://n.1asphost.com/wheelofgod/mailto.asp'
onMouseOver='changeIcon("mailto","over")' 
onMouseOut='changeIcon("mailto","out")'> 
<img src='greywheel.gif' width='20' height='20' border='0' name='mailto'>
Leave Your Feedback</a><br/>
 
<a href='http://n.1asphost.com/wheelofgod/Instructions.asp'
onMouseOver='changeIcon("instr","over")' 
onMouseOut='changeIcon("instr","out")'> 
<img src='greywheel.gif' width='20' height='20' border='0' name='instr'>
How To Conduct Searches</a><br/>
How can I get the URL links highlighted? I think that would look good...and deleting the underlining too.


Learning of our true origins.

I feel sorry:

http://www.infowars.com/articles/wor...eknowledge.htm

Foreknowledge of A Natural Disaster
Washington was aware that a deadly Tidal Wave was building up in the Indian Ocean
 
Old February 4th, 2005, 08:05 AM
Friend of Wrox
  
Join Date: Jan 2005
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default
// Copy into head

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

var docTips = new TipObj('docTips');
with (docTips)
{


 template = '<table bgcolor="#003366" cellpadding="1" cellspacing="0" width="200" border="0">' +
  '<tr><td><table bgcolor="#6699CC" cellpadding="3" cellspacing="0" width="100%" border="0">' +
  '<tr><td class="tipClass">%3%</td></tr></table></td></tr></table>';


 tips.mysite = new Array(-75, 15, 150, 'Visit this for updates, help and more info');
 tips.welcome = new Array(5, 5, 100, 'Hope you like it...');
 tips.useful = new Array(5, 5, 150, 'This can add important context information to any link...');
 // This next tip uses a formula to position the tip 110 pixels from the right edge of the screen.
 tips.formulae = new Array(5, 50, 150,
  'The Grand Total for the entire journey including basic fare price, taxes and booking fees');
 tips.formulae2 = new Array(-550, 10, 150,
  'The details of your entire journey including your departure/arrival dates and times for all flights, departure airports (with XXX codes), arrival airports (with XXX codes), any stops (if applicable), the class of the passengers seat and the cabin on-board');
 tips.formulae3 = new Array(-550, 10, 150,
  'The Fare price broken down to detail out all the Fare Basis, Fare Rules, Fare Price before Tax, Fare Price after Tax, the number of passengers and booking fees (if applicable)');
 tips.formulae4 = new Array(-550, 10, 150,
  'The Fare markups for Adult Fares, Child Fares and Infant Fares');
 tips.formulae5 = new Array(-20, 70, 150,
  'Enter Title (e.g. Mr, Mrs, Miss, Ms etc)');
 tips.formulae6 = new Array(-20, 70, 150,
  'Enter Passengers forename');
 tips.formulae7 = new Array(-20, 70, 150,
  'Enter Passengers surname');
 tips.formulae8 = new Array(-20, 70, 150,
  'Select the requested seat on-board');
 tips.formulae9 = new Array(-20, 70, 150,
  'Select required in-flight meal (if applicable)');
 tips.formulae10 = new Array(-20, 70, 150,
  'Enter any special requests');

 tips.format = new Array(5, 5, 150, 'That means <i>italics</i>...<br />...etc');



}

var staticTip = new TipObj('staticTip');
with (staticTip)
{
 // I'm using tables here for legacy NS4 support, but feel free to use styled DIVs.
 template = '<table bgcolor="#000000" cellpadding="0" cellspacing="0" width="200" border="0">' +
  '<tr><td><table cellpadding="3" cellspacing="1" width="100%" border="0">' +
  '<tr><td bgcolor="#336666" align="center" height="18" class="tipClass">%3%</td></tr>' +
  '<tr><td bgcolor="#009999" align="center" height="*" class="tipClass">%4%</td></tr>' +
  '</table></td></tr></table>';

 // HIERARCHIAL TIPS: To call one tip object from within another tip object, make sure you
 // pass the a reference to the current object as the second parameter to the show() function.
 tips.links = new Array(5, 5, 100, 'Extra Links',
  '- <a href="javascript:alert(\'Useful indeed...\')">Section 1</a> -<br />' +
  '- <a href="#" name="nest1trig" onmouseover="nestTip.show(\'nest1\', staticTip)" ' +
   'onmouseout="nestTip.hide()">NESTED TIP 1 &gt;</a> -<br />' +
  '- <a href="#" name="nest2trig" onmouseover="nestTip.show(\'nest2\', staticTip)" ' +
   'onmouseout="nestTip.hide()">NESTED TIP 2 &gt;</a> -<br />');

 tipStick = 0;
}

// Here's the other tip object called by the one above, for hierarchial tips.
var nestTip = new TipObj('nestTip');
with (nestTip)
{
 template = '<table bgcolor="#000000" cellpadding="1" cellspacing="0" width="%2%" border="0">' +
  '<tr><td><table bgcolor="#009999" cellpadding="3" cellspacing="0" width="100%" border="0">' +
  '<tr><td class="tipClass">%3%</td></tr></table></td></tr></table>';

 tips.nest1 = new Array(10, 0, 90,
  '<a href="javascript:alert(\'A regular popup menu...\')">Relative Position</a>');

 // This tip is positioned via formulae based on its parent tip's position...
 tips.nest2 = new Array('staticTip.xPos + 95', 'staticTip.yPos + 50', 80,
  '<a href="javascript:alert(\'Nested tip 2\')">Absolutely positioned static tip...</a>');

 tipStick = 0;
}

var stickyTip = new TipObj('stickyTip');
with (stickyTip)
{
 template = '<table bgcolor="#000000" cellpadding="1" cellspacing="0" width="%2%" border="0">' +
  '<tr><td><table bgcolor="#339966" cellpadding="4" cellspacing="0" width="100%" border="0">' +
  '<tr><td align="center" class="tipClass">%3%</td></tr></table></td></tr></table>';

 tips.floating = new Array(5, 5, 100, 'Floating tips can have extra effect!');

 tipStick = 0.2;
}



//--></SCRIPT>

---------------------------------------------------------

// Copy below opening <body> tag

<DIV id=docTipsLayer
style="Z-INDEX: 10000; LEFT: 0px; VISIBILITY: hidden; WIDTH: 10px; POSITION: absolute; TOP: 0px"></DIV>
<DIV id=staticTipLayer
style="Z-INDEX: 10000; LEFT: 0px; VISIBILITY: hidden; WIDTH: 10px; POSITION: absolute; TOP: 0px"></DIV>
<DIV id=nestTipLayer
style="Z-INDEX: 10000; LEFT: 0px; VISIBILITY: hidden; WIDTH: 10px; POSITION: absolute; TOP: 0px"></DIV>
<DIV id=stickyTipLayer
style="Z-INDEX: 10000; LEFT: 0px; VISIBILITY: hidden; WIDTH: 10px; POSITION: absolute; TOP: 0px"></DIV>

__________________________________________________ ________

// Copy to mouseover

onmouseover="docTips.show('formulae2');style.curso r='hand'" onmouseout="docTips.hide()"

Thats a good mouseover effect

www.crmpicco.co.uk





Similar Threads
Thread Thread Starter Forum Replies Last Post
onmouseover question??? RinoDM Javascript 3 May 30th, 2008 03:01 AM
onmouseover sstuber BOOK: Beginning ASP.NET 2.0 BOOK VB ISBN: 978-0-7645-8850-1; C# ISBN: 978-0-470-04258-8 0 April 29th, 2008 12:30 PM
<a onMouseover=... question RinoDM HTML Code Clinic 3 March 6th, 2008 01:55 PM
Adding Classes OnMouseOver zarikiane XSLT 11 July 11th, 2006 01:09 PM




Contact Us - Wrox - Privacy Statement - Top

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.