Html help? - Yet ANOTHER Question

Started by Ali, Mon 14/03/2011 17:07:41

Previous topic - Next topic

Ali

Hi guys, I know there are a few people around with web experience and I'm stuck on this issue.

I have a reasonably large graphic I want to use as a link, and when the mouse hovers over it I want an element of it to change to a different graphic (like status text when hovering over a hotspot in an adventure game).

My problem is I can't find a way to do this without replacing the entire jpg with another jpg in the CSS, which seems inefficient. I want to find a way of making the browser treat two images as one link, changing one of the images when the mouse hovers over either of them. I also want to avoid javascript because this is the front page of the site and I don't want it to be blocked the first time it loads.

Can anyone suggest a solution?

TomatoesInTheHead

#1
Something like this (additional image is only the green part)?

If yes, here's the code:
Code: ags

<!-- css code -->
#container {position:fixed;}
#container #coffee {display:none; left:8px; top:10px; position:absolute;} 
#container:hover #coffee {display:inline;} 

<!-- html code -->
<span id="container">
<img src="cup.png">
<img id="coffee" src="greencoffee.png">
</span>


edit: as for the link, replace span by a and add css code to make the link frame disappear, that should work.

Anian

You want to change image into another image without loading two different images? I'm not actually sure what you want to do/achieve. ???

Well you can chop up the image in a few blocks (use for example div or tables or similar) so it just seems like one image but it's actually several, that way you can change several different parts on what seems to be one image and besides it'll load faster. Although css you can position certain parts of the image so you don't even need a grid.

If you need perhaps a hue change, you could upload a background image (which could be a very small square of a certain color that gets repeated in x and y direction to cover the whole other image) with transparency change on mouse hover so an image below it seems to change hue slightly (an overlay with different alpha settings).

EDIT: eh, what tomato did  ;D
I don't want the world, I just want your half

Ali

Thanks guys, tomato's code is exactly what I needed. With a bit of tweaking I think I'll get the effect I want.

Thanks to both of you for the super-quick replies!

zabnat

I believe the standard way of doing this using a background image for the element that you want the mouseover effect for. This also enables you to write code that can be viewed properly without CSS.
For example like this. foo.png is 50px x 40px image with two 50px x 20px graphics on top of each other. With CSS the link has graphic that changes on mouseover and without CSS it has the text "The hover link".
Code: ags

<style>
#foo { display: block; width: 50px; height: 20px; background-image: url('foo.png'); background-position: 0px 0px; }
#foo:hover { background-position: 0px -20px ;}
#foo span { display: none;}
</style>
<a id="foo" href="http://foo.com"><span>The hover link</span></a>

Ali

Thanks for the suggestion, Zabnat, but that wouldn't help in this situation. I want to change a small element of a larger graphic. Using your method would require the browser to download one image twice the size of the large graphic, which wouldn't be so efficient.

zabnat

Well you would of course have the large image and then position the link in the middle of that. So you would have background image (static 500px x 500px) and then the part of the background image you want to change (2 x 50px x 20px = 50px x 40px).
Actually I just now read your requirement better and I can see my code isn't a straight solution for you problem.

ps. Remember that IE supports hover only on anchors.


Ali

Don't worry about it! Tomato's code seems to do the job perfectly in all the browsers I've tested so far, so I'm happy. I wish I'd asked sooner instead of puzzling over it for so long!

Ali

Sorry to double post, but I'm in trouble again!

Tomato's script seems to be working correctly. The site is my portfolio (though not finished in all areas): www.abeckettking.com

One thing that's stumping me is this: While loading the site sometimes displays in the wrong place - down in the right hand corner in both Mozilla and IE (more commonly in IE). If I refresh the browser rapidly the style settings seem to break momentarily and images get borders around them etc.

It seems to me that some part of the formatting or CSS isn't coming into effect until after the images load or something like that. The css I'm using is here.

Could any of you offer enlightenment?

zabnat

Do you mean that the whole content is positioned in right hand corner?
One problem I can see is that you have not defined where the content should be displayed. You have only put it in a table cell and you leave it up to the render engine to decide what size should the "padding cells" be. In my opinion you would be better off forgetting about table layouts and using divs and css.
Try dropping the main table (that centers your content on page) and replace it with a div and css that centers it horizontally and vertically. Although this is not trivial, it is a common problem and google gives many tutorials how to do this.

I couldn't get the images to have borders (missing css styles) but it could be related to the flash of unstyled content.

monkey0506

#10
Why do you say that centering the div is non-trivial? Isn't it just as simple as:

Code: ags
#center {
  margin-left: auto;
  margin-right: auto;
}


(Edit: IIRC you may have to specifically define the width in there as well to make this method work..)

The table tag (and its respective children) is being phased out in favour of styled divs and spans, though it hasn't been formally deprecated yet (even the XHTML 1.0 Strict DTD still officially supports it). So at this point it's a matter of preference, but using divs/spans will give you a greater level of control, and help make it more future-proof.

zabnat

That only centers it horizontally. For vertical centering it is a bit more complicated.

Ali

Thanks for the help guys, I've replaced the main table with a div and it seems fine now. Please check it out if you get the chance.

The IE wobbliness during loading remains for all the elements still using tables (occasionally getting stuck in completely the wrong place), so I guess I either live with it or rebuild the site with no tables..

Darth Mandarb



Put a small script on your site that detects Internet ExSuxplorer and says, "You're using an inferior, piece of shit, browser and this site refuses to retard itself to work in such a worthless web browser.  Download Chrome or Firefox" and provide them the appropriate links.

Take a stand!!!

Ali

Ah, my growing hatred of Internet Explorer is just another new way in which I am a nerd.

Anyway, I replaced most of the tables, and specified the remaining tables' positions in the CSS and now I think I've lost the wobbling. Thanks for the help, guys.

Moresco

Quote from: Ali on Thu 17/03/2011 22:06:45
Ah, my growing hatred of Internet Explorer is just another new way in which I am a nerd.

Anyway, I replaced most of the tables, and specified the remaining tables' positions in the CSS and now I think I've lost the wobbling. Thanks for the help, guys.


Nevermind, someone already said that tables were being deprecated before I did.  So sorry about that.
::: Mastodon :::

Darth Mandarb

Quote from: monkey_05_06 on Tue 15/03/2011 22:33:17The table tag (and its respective children) is being phased out in favour of styled divs and spans, though it hasn't been formally deprecated yet (even the XHTML 1.0 Strict DTD still officially supports it). So at this point it's a matter of preference, but using divs/spans will give you a greater level of control, and help make it more future-proof.

Quote from: Moresco on Fri 18/03/2011 00:07:43Nevermind, someone already said that tables were being deprecated before I did.  So sorry about that.

Tables are most assuredly not being deprecated!

They are no longer in vogue for site layouts (were never intended to be used for it anyway) but the markup for tables isn't going anywhere and is still 100% the best way to layout tabular data (that is what the tag was created to do).

But your points are, of course, valid as they were in regards to his site's layout!  I just felt the need to stick up for my beloved tables (I create a lot of reports on the web and I would never use anything but tables to display them!) but I have gone table-less for my site designs.

Ali

A short while ago, you guys helped my with the layout of this site: www.abeckettking.com

However, someone just pointed out an error. When the window is shrunk below the size of the mainarea (990x550), the scrollbars appear. BUT... they don't allow you to scroll around the whole of the window.

I can make it work if the mainarea is positioned relative (rather than absolute) AND I specify the html element height in pixels (rather than using 100%).  But that isn't a good solution because different viewers will have different sized displays.

I'd appreciate any suggestions!

Darth Mandarb

I went through the CSS very quickly (so please forgive me but this is a quick preliminary suggestion) and I'm guessing that issue is probably with the 'overflow:hidden' and the margins that is causing this.  When the resize causes the browser's display area to be smaller than the 'mainarea' the margins push some of the content outside of the 100% widths that are used and because overflow is 'hidden' it doesn't register for the scrollbar to account for.

Again, beg pardon, I did a very quick glance so it's a guess!

Ali

#19
Thanks for having a look, but I don't think it's that... in fact I think most of the elements with overflow: hidden aren't used in this version of the site. I should have deleted them!

My impression is that it has something to do with the position of the main_area element in relation to the html/body. I'm still puzzling over it, so any input would be helpful.

SMF spam blocked by CleanTalk