Announcement

Collapse
No announcement yet.

Trouble with javascript / jquery hover images

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trouble with javascript / jquery hover images

    Hi

    Having a spot of bother trying to get javascript image rollover links working.

    Can get some, but when I repeat the code, they dont work!

    Any help would be great -

    Site

    tomparkes.co.nz/Work.html



    Here is my body code

    <body>

    <div id="facebook"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftomparkes.co.nz&amp;sen d=false&amp;layout=standard&amp;width=450&amp;show _faces=true&amp;action=like&amp;colorscheme=light& amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; float:right; bottom: 0px; right: 0px; position:fixed; width:auto; height:80px;" allowTransparency="true"> </iframe></div>



    <div class="container_12" id="container">

    <div class="container_12" id="banner">
    <div class="grid_2" id="logo"><a href="index.html"><img src="images/logo.png" width="158" height="113" /></a></div>

    <div class="grid_2 push_8" id="bannerinfo"><h2>Tom Parkes_ Graphic + Type + Web Design</h2></div>

    <div class="grid_2 push_8"><h1><a href="mailto:tom.pparkes@gmail.com">tom.pparkes@gm ail.com</a> +64 0220377249</h1>
    </div>


    </div>






    <div class="clear"></div>
    <div class="clearfix" id="bannerspace"></div>

    <div class="grid_2" id="holder"><img src="images/holder.png" width="140" height="595" alt="cant show" />


    <div class="grid_2" id="menu" rel="stylesheet">

    <div class="grid_2" id="mainmenu">


    <ul id="mainnav">


    <li> <a href="index.html" id="mainnav">Home</a></li>
    <li> <a href="about.html" id="mainnav">About</a></li>
    <li> <a href="Work.html" id="mainnav">Work</a></li>
    <li> <a href="contact.html" id="mainnav">Contact</a></li>

    </ul>

    </div>


    <div class="grid_2" id="workmenu">

    <ul>

    <li>
    <a href="hopheadpete.html"><em>Hop Head Pete</em></a></li>
    <li>
    <a href="stuckonquailisland.html"><em>Stuck on Quail Island</em></a></li>
    <li>
    <a href="Punctuatedhistory.html"><em>A Punctuated History</em></a></li>
    <li>
    <a href="stamps.html"><em>Massey 125 Year Stamps</em></a></li>


    </ul>


    </div>

    </div>
    </div>





    <div class="grid_9 push_1" id="bigimage">

    <div id="gallery">

    <div class="grid_3" id="workicons">

    <div class="fadehover">
    <a href="hopheadpete.html"><img src="images/hopicon.png" alt="" class="a" />
    <img src="images/hophover.png" alt="" class="b" /></a>
    </div>


    </div>



    <div class="grid_3" id="workicons">


    <div class="fadehover">





    <img src="images/punctuated.png"alt="" class="a" />
    <img src="images/punchover.png" alt="" class="b" />





    </div>


    </div>

    <div class="grid_3" id="workicons">

    <div class="fadehover">
    <img src="images/quailicon.png" alt="" class="a" />
    <img src="images/qhover.png" alt="" class="b" />
    </div>






    </div>

    <div class="fadehover">
    <a href="punctuatedhistory.html"><img src="images/hopicon.png" alt="" class="a" />
    <img src="images/hophover.png" alt="" class="b" /></a>
    </div>








    </div>

    </div>
    </div>
    </div>
    </div>
    </body>

  • #2
    After pasting this into the forums, I see it butchered the code, it turned my tabs into super tabs, if you copy and paste it into your editor, it should format it to where it's clean and neat. It does in Sublime Text 2 and Komodo Edit at least. Anyway -->

    You had 2 extra </div>'s at the end, and you have #workimage being used over and over. ID's should only be used once, classes are for multiples.
    You didn't post the jQuery so I can't confirm that either of these is the source of your trouble, but hopefully it helps.
    On a side note, it you indent your code to show what's nested inside of what, you can spot the extra div's and things of that nature a lot easier. It may have been formatted before you posted, I don't know, but if not, I highly suggest you write it out that way, it's a huge help when you're troubleshooting your code. Noting what each </div> is after you close it helps a lot as well for those times when there is a page and a half of code within a container and you cant see where it starts.

    Code:
    <body>
    	<div id="facebook">
    		<iframe 
    			src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftomparkes.co.nz&amp;sen d=false&amp;layout=standard&amp;width=450&amp;show _faces=true&amp;action=like&amp;colorscheme=light& amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; float:right; bottom: 0px; right: 0px; position:fixed; width:auto; height:80px;" allowTransparency="true"> 
    		</iframe>
    	</div> <!-- End #facebook -->
    	<div class="container_12" id="container">
    		<div class="container_12" id="banner">
    			<div class="grid_2" id="logo">
    				<a href="index.html"><img src="images/logo.png" width="158" height="113" /></a>
    			</div>
    			<div class="grid_2 push_8" id="bannerinfo">
    				<h2>Tom Parkes_ Graphic + Type + Web Design</h2>
    			</div> 
    			<div class="grid_2 push_8">
    				<h1>
    					<a href="mailto:tom.pparkes@gmail.com">tom.pparkes@gm ail.com</a> +64 0220377249
    				</h1>
    			</div>
    		</div> <!-- End #banner -->
    		<div class="clear"></div>
    		<div class="clearfix" id="bannerspace"></div>
    		<div class="grid_2" id="holder">
    			<img src="images/holder.png" width="140" height="595" alt="cant show" />
    			<div class="grid_2" id="menu" rel="stylesheet">
    				<div class="grid_2" id="mainmenu">
    					<ul id="mainnav">
    						<li> <a href="index.html" id="mainnav">Home</a></li> 
    						<li> <a href="about.html" id="mainnav">About</a></li>
    						<li> <a href="Work.html" id="mainnav">Work</a></li>
    						<li> <a href="contact.html" id="mainnav">Contact</a></li>
    					</ul>
    				</div> <!-- End #mainmenu -->
    				<div class="grid_2" id="workmenu"> 
    					<ul>
    						<li>
    							<a href="hopheadpete.html"><em>Hop Head Pete</em></a>
    						</li>
    						<li>
    							<a href="stuckonquailisland.html"><em>Stuck on Quail Island</em></a>
    						</li>
    						<li>
    							<a href="Punctuatedhistory.html"><em>A Punctuated History</em></a>
    						</li>
    						<li>
    							<a href="stamps.html"><em>Massey 125 Year Stamps</em></a>
    						</li>
    					</ul>
    				</div> <!-- End #workmenu -->
    			</div> <!-- End #menu -->
    		</div> <!-- End #holder -->
    		<div class="grid_9 push_1" id="bigimage">
    			<div id="gallery">
    				<div class="grid_3" id="workicons">
    					<div class="fadehover">
    						<a href="hopheadpete.html">
    							<img src="images/hopicon.png" alt="" class="a" />
    							<img src="images/hophover.png" alt="" class="b" />
    						</a>
    					</div> <!-- End .fadehover -->
    				</div> <!-- End #workicons -->
    				<div class="grid_3" id="workicons">
    					<div class="fadehover">
    						<img src="images/punctuated.png"alt="" class="a" />
    						<img src="images/punchover.png" alt="" class="b" />
    					</div> <!-- End .fadehover -->
    				</div> <!-- End #workicons -->
    				<div class="grid_3" id="workicons">
    					<div class="fadehover">
    						<img src="images/quailicon.png" alt="" class="a" />
    						<img src="images/qhover.png" alt="" class="b" />
    					</div> <!-- End .fadehover -->
    				</div> <!-- End #workicons -->
    				<div class="fadehover">
    					<a href="punctuatedhistory.html">
    						<img src="images/hopicon.png" alt="" class="a" />
    						<img src="images/hophover.png" alt="" class="b" />
    					</a>
    				</div>
    			</div> <!-- End #gallery -->
    		</div><!-- End #bigimage -->
    	</div> <!-- End #container -->
    </body>

    Comment

    Search

    Collapse

    Advertisement

    Collapse

    Latest Topics

    Collapse

    • HiddenDev
      Reply to Need critique for logo
      HiddenDev
      Hello, welcome to the forums.

      I agree that the puzzle pieces aren't quite in the "right" positions. I like the way they are placed randomly, but it's way too cluttered.
      ...
      Today, 05:06 PM
    • Cosmo
      Reply to Logo and Business Card feedback
      Cosmo
      I'll say the same thing I say all the time. Design your logo in black and white. And design it with a pencil and paper, not on the computer. When I design a logo, the computer is only on maybe the last...
      Today, 04:54 PM
    • Cosmo
      Reply to Need critique for logo
      Cosmo
      I like the idea, but not the execution. I also don't like that the puzzle pieces are so randomly placed. They look like a mistake. If you are going to do something like that, simplify it way down and...
      Today, 04:52 PM
    • jjdesign
      Logo and Business Card feedback
      jjdesign
      Here's my attempt at designing my own logo and business card. Work involves both modern and traditional residential design (architecture and interiors) so wanted a logo that implies both.
      Not a...
      Today, 04:16 PM
    • Yehoshua
      Reply to Need critique for logo
      Yehoshua
      The puzzle pieces are so small that when you scale it down, they get lost. I also think the logo image is too large compared to the text. I like how tracked-out you have the text, but I think the overall...
      Today, 04:12 PM

    GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
    Working...
    X