Different image dependent on which link clicked

Forum Moderators: not2easy

Message Too Old, No Replies

Different image dependent on which link clicked

displaying images

Dragonisle

2:59 am on Sep 30, 2007 (gmt 0)

Hi,
first post. Ive searched a bit online on a question that I have and cant find the answer, dont know if its possible.
Here goes:
I want to create a HTML page that has about 100 links. These links will take you to a single HTML page that will show a image (depending on what link you clicked). Is it possible to display a image depending on what link you clicked using CSS using only 1 html page?

For example:
on a html page you have 3 links: xbox, ps3 and Wii.

The user clicks on xbox.
A xbox page appears w/ a pic of a xbox

user closes the xbox page.

Now the user clicks on ps3.
A ps3 page appears w/ a pic of a ps3.

The catch is I want to use only 1 html page to display the pics using CSS. The xbox, ps3 and Wii html page is the same html page. It appears that a variable has to be used to determine which picture to display in the html page.

any ideas or is this confusing? :)

thanks

Marshall

4:29 am on Sep 30, 2007 (gmt 0)

Dragonisle, welcome to WebmasterWorld.

There is a way to do this with CSS and it has been discussed here before within the past six weeks. Unfortunately, I cannot locate the post. If you search WebmasterWorld or check the CSS Forum library, I am sure you can find it. It might be something like Show/Hide using CSS.

Your other option is use javascript and hidden <div> which I do have a script for.

Marshall

vincevincevince

4:42 am on Sep 30, 2007 (gmt 0)

variables don't really exist in CSS, the closest I can think of is using the :active pseudoclass, but even that that's messy and browser support is unreliable.

Your solution will either be:

Multiple html pages

Passing an argument to PHP / Perl or similar and having that edit the html page on output

Javascript (via an argument)

Marshall

4:56 am on Sep 30, 2007 (gmt 0)

Vince,

It was discussed here before and there is even a web site with an example, but I can't remember! It involved using a:hover with an absolute positioned <div> and a <span> in the <a>. You would think if I can remember that much, I could remember the whole thing. The link looked something like this:

<a href="whatever">link<span class="hidden">some text</span></a> I am sure you could substitute an image for the text.

Surely someone remembers the post.

Marshall

Marshall

5:44 am on Sep 30, 2007 (gmt 0)

Dragonisle and Vince,

I picked my brain and think I remembered the trick, though I am not sure how cross-browser friendly it is. The code is below. And yes, you can substitute images for text.

Marshall

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a span.hidden {
display:none;
}
a:hover span.hidden {
display: block;
float: left; /* A MUST */
margin: 50px 0 0 10px; /* set to your needs */
height: 50px; /* set to your needs */
width: 50px; /* set to your needs */
border: thin solid #000; /* optional */
text-decoration: none; /* text will appear as link */
text-align: center;
}
</style>
</head>

<body>
<p><a href="#">Link 1 <span class="hidden">Text One </span></a> ¦
<a href="#">Link 2 <span class="hidden">Text Two </span></a> ¦
<a href="#">Link 3 <span class="hidden">Text Three </span></a> ¦
<a href="#">Link 4 <span class="hidden">Text Four </span></a></p>
</body>

</html>

vincevincevince

9:02 am on Sep 30, 2007 (gmt 0)

I picked my brain and think I remembered the trick

Yes, that's pretty much the trick... unfortunately it doesn't do the 'click and open a new window with' part of Dragonisle's request; what you've posted is for showing things dynamically on hover.

Dragonisle

2:55 pm on Sep 30, 2007 (gmt 0)

Wow...thanks for the responses. Ill do more checking into the scripting part of it now :)

lavazza

7:13 pm on Sep 30, 2007 (gmt 0)

I recently started a thread called CSS span hover popups buggy across browsers [webmasterworld.com] where I posted a similar question, wanting to plagiarise Eric Meyer's CSS popup demo [searchengineworld.com]

SuzyUK devised a very elegant cross browser solution, which she posted
at 10:03 am on Aug 9, 2007 (utc)
on [webmasterworld.com...]
Post #:3417708