Announcement Announcement Module
Collapse
No announcement yet.
Trouble with javascript / jquery hover images Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • Roth
    Reply to What do you think of my video game cover art?
    Roth
    This is inferior to the original in every way. PD made some very good points already to do with hierarchy, and energy. There are basically three elements, the figure, the name, and the background, so...
    Today, 12:14 AM
  • Roth
    Reply to Logo for a supplement company
    Roth
    This is a bit of a stretch. It's like you saw the H in the weights, ran with it, hit a creative wall and tried really hard to make the rest fit. The logo and name are out of proportion to one another...
    Yesterday, 11:50 PM
  • extraordenary
    Reply to What do you think of my video game cover art?
    extraordenary
    Professional designers either create the images themselves, or get it from someone else with respects to the copyrights. Designers often make sure that the image they have is royalty-free so they don't...
    Yesterday, 11:14 PM
  • graphic91
    Reply to What do you think of my video game cover art?
    graphic91
    Umm...really? I know about the design rules, but where to look first? There's not that much information or "look-at-mes" on it and it's just the cover of a video game. Most people who want to...
    Yesterday, 10:34 PM
  • Lucifer
    Reply to Your thoughts on this logo?
    Lucifer
    I like it. I like the way you've done the spacing.
    Yesterday, 10:32 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • 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

    Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc.
    Working...
    X