Web Analytics Made Easy - StatCounter Hover Button and iFrame - CodingForum

Announcement

Collapse
No announcement yet.

Hover Button and iFrame

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Hover Button and iFrame

    Hey-Ho,
    I got a Problem, which i can't solve by myself or with the help of google.

    At the moment I am making a website for my Band. Everything is working great so far. But now i got a little "optical" Problem.

    This is the Page of our Members. I added several images for a nicer look of our names(Julz, TDog, Chris & Nicki). If you hover over an image, it changes the image, the text in the image glows and gets colored. onMouseOver and onMouseOut work fine. I linked the images to different webpages targeting the iframe.

    Now the problem: If i click on any image, the iframe shows the content of the webpage its directing to. But I want to keep the image change to the one which is "glowing and colorfull" as long as i am on the page. When i take the mouse away from the image it returns to the "normal" one.

    This is the script of the webpage:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link href="style.css" type="text/css" rel="stylesheet" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Brum Brum Tut Tut</title>
    
    <style type="text/css">
		a:link {color: #333333; text-decoration: none; }
		a:active {color: #333333; text-decoration: none; }
		a:visited {color: #333333; text-decoration: none; }
		a:hover {color: #ffaf00; text-decoration: none; }
		
		body {
			background: #333333 url(bg_members.png) no-repeat top center ;
		}
	</style>
    
    <SCRIPT language="javascript1.1">
	
		// Bild-Dateien für das Standard-Menü auf der rechten Seite!
		pngn_Home = new Image(134,80)
		pngn_Home.src = "Images/MenuButtons/n_Home.png"
		pngh_Home = new Image(134,80)
		pngh_Home.src = "Images/MenuButtons/h_Home.png"
		pngn_Gigs = new Image(126,88)
		pngn_Gigs.src = "Images/MenuButtons/n_Gigs.png"
		pngh_Gigs = new Image(126,88)
		pngh_Gigs.src = "Images/MenuButtons/h_Gigs.png"
		pngn_Members = new Image(220,78)
		pngn_Members.src = "Images/MenuButtons/n_Members.png"
		pngh_Members = new Image(220,78)
		pngh_Members.src = "Images/MenuButtons/h_Members.png"
		pngn_Contact = new Image(201,74)
		pngn_Contact.src = "Images/MenuButtons/n_Contact.png"
		pngh_Contact = new Image(201,74)
		pngh_Contact.src = "Images/MenuButtons/h_Contact.png"
		
		// Bild-Dateien für das Auswahl-Menü der einzelnen Member!
		n_Members_1 = new Image(91,70)
		n_Members_1.src = "Images/MenuMembers/n_Julz.png"
		a_Members_1 = new Image(91,70)
		a_Members_1.src = "Images/MenuMembers/a_Julz.png"
		n_Members_2 = new Image(100,47)
		n_Members_2.src = "Images/MenuMembers/n_TDog.png"
		a_Members_2 = new Image(100,47)
		a_Members_2.src = "Images/MenuMembers/a_TDog.png"
		n_Members_3 = new Image(99,48)
		n_Members_3.src = "Images/MenuMembers/n_Chris.png"
		a_Members_3 = new Image(99,48)
		a_Members_3.src = "Images/MenuMembers/a_Chris.png"
		n_Members_4 = new Image(88,54)
		n_Members_4.src = "Images/MenuMembers/n_Nicki.png"
		a_Members_4 = new Image(88,54)
		a_Members_4.src = "Images/MenuMembers/a_Nicki.png"

		function changeImg(cImg,ref) {
		document.images[cImg].src = ref.src
		}
	</SCRIPT>


</head>

<body class="main">
	<div id="header">
    	<a href="index.html"><img src="Logo.png" width="281" height="161" alt="Brum Brum Tut Tut" longdesc="Logo.png" style="margin-left: 32px; margin-top: 4px; "/></a>
        
        	<!-- Das Menü der Homepage auf der rechten Seite -->
		<a href="index.html" onMouseOver="changeImg('imgn_Home',pngh_Home)" onMouseOut="changeImg('imgn_Home',pngn_Home)" > 
		<img src="Images/MenuButtons/n_Home.png" alt="Main Page" border= "0" name="imgn_Home" style="margin: -168px 1027px" ></a>
        
        <a href="contact.html" onMouseOver="changeImg('imgn_Contact',pngh_Contact)" onMouseOut="changeImg('imgn_Contact',pngn_Contact)" >
		<img src="Images/MenuButtons/n_Contact.png" alt="My Blog" border= "0" name="imgn_Contact" style="margin: -66px 1071px" ></a>
        
		<a onMouseOver="changeImg('imgn_Members',pngh_Members)" onMouseOut="changeImg('imgn_Members',pngh_Members)" >
		<img src="Images/MenuButtons/h_Members.png" alt="Pictures" border= "0" name="imgn_Members" style="margin: -115px 959px" ></a>
        
        <a href="gigs.html" onMouseOver="changeImg('imgn_Gigs',pngh_Gigs)" onMouseOut="changeImg('imgn_Gigs',pngn_Gigs)" >
		<img src="Images/MenuButtons/n_Gigs.png" alt="All News" border= "0" name="imgn_Gigs" style="margin: -137px 1145px" ></a>

			<!-- Das Auswahlmenü für die einzelnen Bandmitglieder -->
		<a href="Members/Members_1.htm" target="MembersWindow" onMouseOver="changeImg('img_Julz',a_Members_1)" onMouseOut="changeImg('img_Julz',n_Members_1)" > 
		<img src="Images/MenuMembers/a_Julz.png" alt="Julz" border= "0" name="img_Julz" style="margin: -110px 430px" ></a>

        <a href="Members/Members_2.htm" target="MembersWindow" onMouseOver="changeImg('img_TDog',a_Members_2)" onMouseOut="changeImg('img_TDog',n_Members_2)" >
		<img src="Images/MenuMembers/n_TDog.png" alt="TDog" border= "0" name="img_TDog" style="margin: -102px 533px" ></a>
        	
		<a href="Members/Members_3.htm" target="MembersWindow" onMouseOver="changeImg('img_Chris',a_Members_3)" onMouseOut="changeImg('img_Chris',n_Members_3)" >
		<img src="Images/MenuMembers/n_Chris.png" alt="Chris" border= "0" name="img_Chris" style="margin: -101px 646px" ></a>

        <a href="Members/Members_4.htm" target="MembersWindow" onMouseOver="changeImg('img_Nicki',a_Members_4)" onMouseOut="changeImg('img_Nicki',n_Members_4)" >
		<img src="Images/MenuMembers/n_Nicki.png" alt="Nicki" border= "0" name="img_Nicki" style="margin: -106px 761px" ></a>

	</div>

	<div id="content">
		<iframe src="Members/Members_1.htm" name="MembersWindow" height="695px" width="830px" scrolling="auto" frameborder="0" > </iframe>
	</div>  
 
<br class="clearfloat" />
	<div id="footer">
    	<table border="0">
        <tr>
        	<th width="40">© 2011</th>
        	<th width="94">Brum Brum Tut Tut</th>
        	<th width="15"></th>
        	<th width="165"><a href="index.html">Home</a>   |   <a href="Gigs.html">Gigs</a>   |   <a href="Members">Members</a>   |   <a href="Contact.html">Contact</a></th>
   		</tr>
        </table>
	</div>
</div>

</body>
</html>
    Tags: None
  • #2
    Sequence of pseudo-classes should be as follows:

    Code:
    a:link {color:#FF0000;}      /* unvisited link */
	a:visited {color:#00FF00;}  /* visited link */
	a:hover {color:#FF00FF;}  /* mouse over link */
	a:active {color:#0000FF;}  /* selected link */
    For details refer this

    Comment

    • #3
      Why should they? Thats only for the hyperlinks and I only use them in the "footer" at the bottom of the page. But what I am talking about is the iFrame content; and even these are images and not hyperlink-texts. Your change would affect it.

      Comment

      • #4
        Originally posted by tk4muffin View Post
        Why should they? Thats only for the hyperlinks and I only use them in the "footer" at the bottom of the page. But what I am talking about is the iFrame content; and even these are images and not hyperlink-texts. Your change would affect it.
        Further more ... the link of your post, is just an example. It doesn't mean that i has to be the exact code.

        Comment

        • #5
          well you already say you have the onmouse stuff working... I am assuming that you are also using javascript to re-write the src for the iframe via an onclick event (didn't check)... If you are: simply add into that script the restyle for the image... If you are not using javascript to rewrite the src, add to your <a> tag an onclick event that sends a reference number to a javascript that will restyle it...
          eg.
          Code:
          <a id="member_Paul_1" blah blah blah onclick="colorme(1)"> <img src= some source/> </a>
.....
and then in your javascript
.....
function colorme(num)
{
document.getElementByID("member_Paul_" + num).style.border="3px ridge green";
}
          Note: this is an on the fly script to give you an idea... do not count on all the syntax's being correct... but it should be a good place to start

          I code C hash-tag .Net
          Reference: W3C W3CWiki .Net Lib
          Validate: html CSS
          Debug: Chrome FireFox IE

          Comment

          Previous template Next
          Working...
          X
          😀
          🥰
          🤢
          😎
          😡
          👍
          👎