We Keep Coding

How could I get the arrow image to be placed on the left of "answer1"

Here's the code, a bit messy, going to fix it up after this is answered.
<table>
<tr>
<td>
<a href="" onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';" onmouseout="document.getElementById('place-holder-1').src='';">
website screenshot service
<img src="" id="place-holder-1" style="zindex: 100; position: absolute;" />
</a>
</td>
</tr>
</table>
Here is a live demo: http://jsfiddle.net/Lrnvrdub/
And thanks for the help it's greatly appreciated.
Edit: all of the replies work fantastically but when I try to adjust the size of the image, I have tried using both css and html, an empty square is in the image's place when the link isn't hovered.
Here's an example: http://jsfiddle.net/csewukgs/

Another option to Fabio's solid answer is to use a background image.
<a class="bullet" href="">Answer1</a>
<a class="bullet" href="">Answer2</a>
.bullet {
background: url("path/to/image.png") no-repeat 0 50%;
padding-left: 18px; //width of image, plus some extra spacing
}
The benefit being that if you have a list of links, you do not need to add an img element to every one.
One caveat, if the image is non-decorative and actually communicates something important, do use an img element with an appropriate title attribute, which is helpful to screen-reader users.
<a class="bullet" href="">Answer1 <img src="..." title="The correct answer"></a>
// use Fabio's float:left solution

delete the inline style and add this
a img{float:left}
you may want to add some margin as well, but you'll get the idea
Note: it's a good idea to give a class to that img so you don't have to be this generic. Like
.bullet{float:left}
HTML
<img class="bullet" src="uyourimage" id="place-holder-1" />

This is my solution: http://jsfiddle.net/1Latpnzn/2/
It assumes that you want to shift the text to the right to make room for the image. By setting the placeholder to be as follows:
#place-holder-1 {
display: inline-block;
vertical-align: middle;
}
reordering the html:
<a href="" id="hover-link">
<img id="place-holder-1" />
<span>Answer1</span>
</a>
and removing the position: absolute; image can be positioned to the left of the text.

If you can change the position from absolute to inline block and move the image before the "answer 1" text that will work, and to get it to be aligned with the text you can add the vertial-align:bottom style
<a href=""
onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';"
onmouseout="document.getElementById('place-holder-1').src='';">
<img src="" id="place-holder-1" style="zindex: 100; position: inline-block; vertical-align:bottom" />
Answer1
</a>

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...

I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.

Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"

Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Css or javascript scroll transition?

I have two divs with:
width:100%; height:100%
so my whole document has an height of 200%;
both div`s have an link to each other,
now when i click on the link, i want that the site smoothly slides to the other div,
I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!
I tried to achive it with translateY, but it didnt worked!
Here is an exemplary code:
http://jsfiddle.net/hSU7R/
The HTML
<div class="full" id="one">
<span style="width:100%; background-color:blue">
<a href="#two" >Scroll to 2</a>
</span>
</div>
<div class="full" id="two">
<span style="width:100%; background-color:blue">
<a href="#one" >Scroll to 1</a></span>
</div>
The CSS
html,body {
width:100%;
height:100%;}
.full {
height:100%;
width:100%;}
#one {background-color:green}
#two {background-color:red}

Is this what you're looking for? A fork of your jsFiddle.
There has to be a smarter way to do this, but that's why we have jQuery right? My basic idea was to grab each anchor and turn off the default click response. Then, replace it with one that starts a setInterval chain. Each time the interval transpires, the window will incrementally scroll based on a frame rate and an estimated total run time. The actual run-time seems to take longer than the input time, but it at least gives you a way to get started.
What is the main disadvantage to using jQuery? I would think you'd get better performance from their implementation, since the jQuery people work on this stuff all the time.

You can control the scroll (speed, direction, position(?)) behavior with css.
CSS3 transitions enables to specify the way an element will go from a state to another while scroling is not an element. But you can position the body.
There is 'scroll-snap-points' wich might relate.
A CSS technique that allows customizable scrolling experiences like
pagination of carousels by setting defined snap points.
jsfiddled example
CSS
.gallery {
font-size: 0;
margin: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-points-x: repeat(1000px);
scroll-snap-type: mandatory;
white-space: nowrap;
width: 1000px;
}
img {
width: 100%;
}
HTML
<div class="gallery">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>

Removing unwanted space between images

My problem is in my navigation bar, which can be found here: http://grupocoral.netai.net/
There is a space between those images and i want to remove it. How can I do it?
Javascript Code:
function swap(element, image) {
element.src = image;
}
And the html code:
<div id="navbar"><img src="images/homeover.png">
<img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');">
<img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');">
<img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');">
<img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');">
</div>
Just in case, navbar CSS code:
#navbar{
width: 1280px;
margin: 0 auto;
height: 40px;
horizontal-align: center;
padding:inherit;
}
By the way, do you know any other way of making a menu like that without JS?
Thanks,
langel

It's due to the white space in your code. Remove the white space between your links and that should clear it up.
In other words, change your HTML block of navigation to:
<div id="navbar"><img src="images/homeover.png"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"> </div>

This keeps my code clean and it removes the whitespaces in the code.
<a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a>

Inline elements like these are whitespace dependent, which means that browsers will render some whitespace between them.
to counter this you can either run all your elements together on one line
linklink
or block the closing and opening tags
<a href="#">
link</a><a href="#">
</a>
<a href="#">
link</a><a href="#">
</a>
:)

to remove the space just remove the break line between the anchor ex:
and i suggest to use the css without the js :
<div id="navbar">
<a class="home" href="#"></a>....
</div>
CSS :
#navbar a{display:inline-block;margin:0;}
#navbar a.member{background:url(images/member.png) no-repeat 0 0}
#navbar a.member:hover{background:url(images/memberhover.png) no-repeat 0 0}

You do have an alternative option to your javascript image swap. You can use the CSS :hover in combination with background-image.
dabblet example:
http://dabblet.com/gist/2253898
CSS:
#Membros{
background-image:url('http://grupocoral.netai.net/images/membros.png');
width:240px;
height:40px;
}
#Membros:hover {
background-image:url('http://grupocoral.netai.net/images/membrosover.png');
}
HTML
<div id="Membros"></div>
I hope this helps!

By the way, do you know any other way of making a menu like that without JS?
Yes, here is an example, I've used one of your background image link with 'Home' on it, you should use only one image without any text label on it.

you can also instead of using javascript to change the image source, use :hover css pseudo-class to change the background, it will require you to change the way is made but it will make this menu work even when JS is disabled
css_pseudo_classes

How to select two links at once? (i.e. Title & Image)

i'm wondering how to achieve this kind of thumbnail gallery...
http://cargocollective.com/saintea
like when you roll over the thumbnail,
it gives an highlight effect to the title at the same time even though they are two separate elements.
I could make them as one file, but the reason why I want to have them separate is to assign
different effects :) !
can someone please lend me a hand?
thank you so much for reading this post !!!
have a great day !

It's just two <div>s in a link tag. But block elements in inline elements aren't valid, so you could better use <span> elements in a link tag like this:
HTML:
<a href="#">
<span class="one">text</span>
<span class="two">something else</span>
</a>
a:link span, a:visited span {
display: block; /* <-- for example */
color: blue;
}
CSS:
a:hover span.one {
color: yellow;
}
a:hover span.two {
color: orange;
}

As the other answers indicate, you could do it with both javascript and CSS. The page uses javascript and the framework jQuery to do it.
I made a demo of how it can be done both ways: here.
Given the following HTML:
<a href="#" id="theLink">
<img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" />
<span id="theText">Some text</span>
</a>
You can either do it with jQuery (this is roughly how that page does it):
$("#theImage").hover(
function() {
$(this).fadeTo("fast", 0.7);
$("#theText").addClass("hover");
},
function() {
$(this).fadeTo("fast", 1);
$("#theText").removeClass("hover");
}
);
where the class hover styles the text.
Here, you are telling jQuery to fire one function when you hover over the image, and another function when you hover out of the image. $("this).fadeTo sets the opacity of the image, while $("#theText").addClass.. well, it adds the class to theText.
(ofcourse, you don't need jQuery to do this, it's just very handy to use such a framework because it abstracts away much of the work)
Or with CSS:
#imagelink:hover img {
/* See http://www.quirksmode.org/css/opacity.html for opacity */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#imagelink:hover span {
background-color: #66E8FF;
}
Here we're telling the browser that when we hover over the link with the id imagelink, the contents inside the link of type img should have an opacity of 70%, while elements of the type span should have a different background color.

It's perfectly acceptable to wrap just about any elements within a single anchor element. Most browsers already support this, and w/ HTML5 it's actually preferred. So I would just do:
<a href="#">
<img src="image.jpg" width="" height="" alt="" >
<p>Description of the image</p>
</a>
a:hover img { }
a:hover p { }

I'd do it the following way:
<img src="image.gif"
onmouseover="change image style, then change getElementById('comment') style"
onmouseout="change all back"/>
<span id="comment">some text</span>