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


No announcement yet.

Hover Button and iFrame

  • Filter
  • Time
  • Show
Clear All
new posts

  • Hover Button and iFrame

    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:
    <!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">
    	<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 ;
        <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
    <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 id="content">
    		<iframe src="Members/Members_1.htm" name="MembersWindow" height="695px" width="830px" scrolling="auto" frameborder="0" > </iframe>
    <br class="clearfloat" />
    	<div id="footer">
        	<table border="0">
            	<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>

  • #2
    Sequence of pseudo-classes should be as follows:

    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


    • #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.


      • #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.


        • #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...
          <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