Looking for coding help!

Submitted by _jaspeh_ on Tue, 11/08/2009 - 11:37am
Heya =) So Im trying to do a petpage for a Background guide. I want to have larger screenshots of backgrounds, to be able to see them better. I can put all the larger images on the page directly... but I was thinking about displaying the smaller item icons (80x80px) on the page, and then when you mouseover, a larger image (300x300px) would popup. Ive been looking online and at other peoples petpages for ideas and trying to make it work, but nothing so far. If you are unsure what I am trying to do, you can take a look at fireynicxa's fabulous guide. http://www.neopets.com/~featherfloating So when you mouseover, another image appears temporarily. The thing is that I want that 2nd image to be larger, but her code seems to work that way since both images are the same size. Since neo doesnt let you do javascript and such, it would have to be done strictly with css/html. Any advice, pointers, etc are all welcome. :D
Forums: 
Neopets Misc
  • 9098 reads

Okay, with the great help of Bik, I got the larger image like I wanted :D The only problem now is that the code works because its based of the < a href > tag (a:hover, etc). I didnt want my bgs to be links, and I can sort of work around it by making them link to nothing, but it will still change the cursor to a hand and look like a link :K Any ideas if I can do this without keeping it a link? I can send you my code if you want =)
[hr][size=11]Training, Luck & Medicine! ^_^ www.neopets.com/browseshop.phtml?owner=_jaspeh_&misc#c [/size]
_jaspeh_ | Tue, 11/08/2009 - 12:34pm |

It doesn't work without the link though you can make the cursor not change [code] .img img { width: 80px; height: 80px; background: #E1FCF4; border: 0px; font-size: 1px; display: block; text-align: center; margin: 0px 25px 0px 25px; cursor: default; [/code] I think that the bit from my code but i'm not sure. I've got to go to school so i'll double check later.
fireynicxa | Tue, 11/08/2009 - 12:51pm |

Oh I see your cursor doesnt change. I wouldnt mind that then, doesnt look like a link at least :D Ill try that code and if it doesnt work, Ill poke around your source, thanks!
[hr][size=11]Training, Luck & Medicine! ^_^ www.neopets.com/browseshop.phtml?owner=_jaspeh_&misc#c [/size]
_jaspeh_ | Tue, 11/08/2009 - 12:54pm |

Oh I got it to work ^_^ Thanks!
[hr][size=11]Training, Luck & Medicine! ^_^ www.neopets.com/browseshop.phtml?owner=_jaspeh_&misc#c [/size]
_jaspeh_ | Tue, 11/08/2009 - 1:08pm |

I think it should be possible to get rid of the links entirely. If you assign all backgrounds to a class of it's own and put a classname:hover-tag in your css and then apply the same coding as you did for the a:hover code I think it should work. This approach has got both pros and cons obviously; the pros being you can have the popups only affect the actual bgs and not any other links you might have on the page (since a:hover would affect all links) and thus giving you more freedom, along with - as mentioned - you don't have to have the images as links. A con would be the extra coding needed, since you'd have to connect all bgs to the class. But that could possibly be countered with a subclass, depending on how the page looks. Anyhow, interesting idea, I might apply something similar to my background catalog (and I did actually have something like that in mind.) Wow, long and possibly pointless post *oui* ___________ [color=gray]Chris, aka wushu_soldier[/color] [size=11][i]Sniper, maller, reseller Background shop of X-Mart Neomallers graphics designer[/i][/size]
___________ [color=gray]Chris, aka wushu_soldier[/color] [size=11][i]Sniper, maller, reseller Background shop of X-Mart Neomallers graphics designer[/i][/size]
silverdragon | Tue, 11/08/2009 - 7:24pm |

Hey Chris, thanks for the tip. I will try to understand and use that post tomorrow when Im more awake :P And poke kirsty back here, I PM'd her and now she seems to have poofed :P
[hr][size=11]Training, Luck & Medicine! ^_^ www.neopets.com/browseshop.phtml?owner=_jaspeh_&misc#c [/size]
_jaspeh_ | Tue, 11/08/2009 - 7:26pm |

Oh and also... what type of BG guide are you making? Cause if you are making the kind I was gonna, then I wont bother. I rather just have one to use than to actually make it myself :P And for you the links would be good, to link to your shop since you do BGs, right?
[hr][size=11]Training, Luck & Medicine! ^_^ www.neopets.com/browseshop.phtml?owner=_jaspeh_&misc#c [/size]
_jaspeh_ | Tue, 11/08/2009 - 7:29pm |

Okay done :P Sorry if my post wasn't clear, just let me know if you want further explaning :) I'm not even sure if it works, but I can't see why it wouldn't :P Can I see the page by the way? :) ___________ [color=gray]Chris, aka wushu_soldier[/color] [size=11][i]Sniper, maller, reseller Background shop of X-Mart Neomallers graphics designer[/i][/size]
___________ [color=gray]Chris, aka wushu_soldier[/color] [size=11][i]Sniper, maller, reseller Background shop of X-Mart Neomallers graphics designer[/i][/size]
silverdragon | Tue, 11/08/2009 - 7:31pm |

Have a look for yourself :) www.neopets.com/~backgroundz (oh yes, how memorable is THAT pet name? ;)) And yeah, it links to my shop just like you said. I will try to keep it up to date with all bgs, but I tend to get lazy (A) I also need to work more on the layout, but what's up already works for now :) ___________ [color=gray]Chris, aka wushu_soldier[/color] [size=11][i]Sniper, maller, reseller Background shop of X-Mart Neomallers graphics designer[/i][/size]
___________ [color=gray]Chris, aka wushu_soldier[/color] [size=11][i]Sniper, maller, reseller Background shop of X-Mart Neomallers graphics designer[/i][/size]
silverdragon | Tue, 11/08/2009 - 7:33pm |

I havent really started it yet, I was just messing around with some code to see what works/doesnt. But I can tell you what I had in mind if you'd like some ideas :)
[hr][size=11]Training, Luck & Medicine! ^_^ www.neopets.com/browseshop.phtml?owner=_jaspeh_&misc#c [/size]
_jaspeh_ | Tue, 11/08/2009 - 7:33pm |

Pages