put two ids in one a href - css

Question

I'm trying to make a button that changes two things with CSS. First, it will make text appear, and second it will make an image on top of the text disappear. I've tried a number of things, but I just can't get it to work. Any help would be greatly appreciated.
the Css is
p {
color:#591865;
text-align:center;
opacity:0;
}
p:target {
color:# a1a100;
opacity:1;
-webkit-transition: opacity 1s linear;
}
#image {
opacity: 1;
background-image:url(images/01.jpg);
height: 786px;
width:1024;
}
#image:target {
opacity:0;
}
and the html is
<nav>
One
Two
Three
Four
</nav>
<div id="image"><img src="images/01.jpg"/></div>
<div>
<p id="one"><img src="graphics/filler.png" width="281" height="128" onClick="javascript:playVideo1();"/></p>
<p id="two"><video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video></p>
<p id="three">Number Three</p>
<p id="four">Number Four</p>
</div>
</div>
thanks for any input

Answer 1

This isn't possible, as it's currently written. To affect two disparate elements in this manner, would require JavaScript.
However, if you're able to reorder your HTML (and are willing to have support from only the more modern browsers), then it can be implemented with the following HTML:
<nav>
One
Two
Three
Four
</nav>
<div>
<p id="one">
<img src="graphics/filler.png" width="281" height="128" onclick="javascript:playVideo1();"/>
</p>
<p id="two">
<video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video>
</p>
<p id="three">
Number Three
</p>
<p id="four">
Number Four
</p>
<div id="image">
<img src="images/01.jpg"/>
</div>
</div>​
And the additional CSS selector:
p:target ~ #image {
opacity:0;
}​
JS Fiddle demo.
If JavaScript's an option, then the following works:
var links = document.querySelectorAll('nav > a'),
image = document.getElementById('image');
for (var i=0,len=links.length; i<len; i++){
links[i].onclick = function(e){
image.style.opacity = '0';
};
}​
JS Fiddle demo.
References:
CSS:
E ~ F, the general sibling combinator.
JavaScript:
getElementById().
querySelectorAll().
element.style.

Answer 2

You cant make two ids in a single href because a # href makes the browser focus on the object your linking to so if you point 2 objects the browser cant focus them both...
for example: imagine you put two hrefs to input text, both will be focused? when you type will it enter the same on both?
you can use javascript:
One
<script type="text/javascript">
function toggleVisible( textId, imageId ) {
$( "#" + textId ).show().
$( "#" + imageId ).hide();
}
</script>
of course you'll have to include jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Answer 3

I was trying to accomplish a similar thing, i.e. using css only to show\hide items using anchors, and the target selector...
I don't have the time to create an example specific to this question, but i'm sure you can figure it out... ;)
here's the fiddle...
(http://jsfiddle.net/pB72f/)

Answer 4

Something like this? (I am using jQuery here but the same idea can be easily applied to regular javascript)
One
<script type="text/javascript">
function toggleVisible( textId, imageId ) {
$( "#" + textId ).show(); //It should be semicolon
$( "#" + imageId ).hide();
}
</script>

Answer 5

You can't put 2 id's into the url, just as david Thomas has said, but there is a complex css solution which requires no javascript. In your proposal you have four a tags, therefore you have 4 individual states that the page can be in. wrap all 4 of your p tags, inside the parent div in 4 nested span tags and id each span tag with an id for each individual state
<nav>
One
Two
Three
Four
</nav>
<span id="oneimage1">
<span id="twoimage1">
<span id="oneimage2">
<span id="twoimage2">
<div id="image1"><img src="images/01.jpg"/></div>
<div id="image2"><img src="images/01.jpg"/></div>
<div>
<p id="one">Number One</p>
<p id="two">Number ~Two</p>
</div>
</span>
</span>
</span>
</span>
Css then would look something like this
span#oneimage1:target #image1 {Properties: values; go here }
span#oneimage1:target #one {Properties: values; go here }
span#oneimage2:target #image2 {Properties: values; go here }
span#oneimage2:target #one {Properties: values; go here }
span#twoimage1:target #image1 {Properties: values; go here }
span#twoimage1:target #two {Properties: values; go here }
span#twoimage2:target #image2 {Properties: values; go here }
span#twoimage2:target #two {Properties: values; go here }
This works because you are targeting a parent of all of the elements you wish to
control from the url. Because you need four id's and you can only place one id
on a single element, you therefore need to nest 4 span elements wrapped around,
the elements whose css you wish to control.
All the Best. TJE