Linking objects with RDFa - Javascript

Hi,

I am new to the two technos metionned above (RDFa and JavaScript). So I don’t know if what I’m trying to do is possible. What I want to achieve is linking some objects in an html page. For example a picture to some text. When you click on the picture the text would be pointed (coloured, or anything).

It seems that rdfa is all indicated for linking the objects together. And I was wondering how it is possible to accomplish the kind of action I described. I think I could use JQuery, but I didn’t find much examples and I’m having troubles figuring out how I can use it.

A few hints on this would be greatly appreciated.

Thanks for your answers.
Actually I want more than stylish interactions, so I couldn’t handle everything in css.
But just with your example, is it easily possible without using jQuery, to color another div if you click on an image?

I’m afraid not. I guess you’re missing the point. Div is a container. You can intercept actions for it and using pseudo-classes you can target style changes for it’s children. Not the other way around.

If you want an exact behaviour like you’ve described you need JS code. I still haven’t come across that example I’m looking for. But I’m not sure it will help much.

I’m also not sure. RDFa is for XHTML1.1 (for documents sent as application/xml+xhtml) and is for user agents to tell how one element is related to another, because they are gathering content.

But Javascript, on its own, can be stupid. It doesn’t have to know that “Felix” = the name of a cat. You can Javascript Do Stuff when cat is clicked on (highlight Felix) by either using the DOM (how different types of HTML elements are nested) or by having Javascript look at anything special in the tags (Javascript can look at attributes in tags like rel, class, title, etc as well as the text content inside them) which might be more robust (still work even if Felix or cat is moved around the document structure).

If you just want stylish interaction, you could just do it in Javascript, without requiring Javascript to know about any content-relationships between the elements. If you want Google or some device to know that Felix has something to do with cat, then RDFa (or microformats) would be the better choice.

You need to have a reasonably good knowledge of JavaScript before you can use JQuery effectively. Otherwise you end up using the JQuery library and a dozen statements to do what can be done without JQuery in two statements (I have seen that sort of stupid situation a lot from people who jump in too quick with using JQuery before they know enough JavaScript to use it properly).

To some extent you can use CSS. If your text and image share the same container, you can use pseudo-classes like :hover or :active for the container in order to style it’s elements when you interact with it.

<html>
<head>
<style> 
 img {width: 64px; height 64px; border: 2px solid;}
 div:active p {color: red;} 
</style>  
</head> 
<body> 
<div>
<img></img> 
<p>Show me red!</p>
</div>
</body>
</html>

In this example, when div is clicked, p turns red. But that means it’s happening even when you click on p, not just on img.

I think I’ve seen a better example, but I just don’t remember where. If I do, I’ll be sure to drop you a line here.

Otherwise, you better learn a bit of jQuery. That’s easy, compared to you learning JavaScript to handle DOM.

True. But they don’t even now. Or care. The fact is that jQuery it’s easier to grasp.