Threaded Mode | Linear Mode

Gadget · 01/08/2009 10:38 PM

Ok, I am trying to edit some of my templates & I am trying to make before/after images when moused over.

A code that works properly on my forum is:

Spoiler for long code:

Now my forum's skin had a back button & forward button in the header, (part of the vista theme)..So I thought why not put these dummy images to use, so I anchored each image with history codes:

Back code:

HTML Code

<a style='cursor:pointer' onclick='history.go(-1)'>IMAGE SRC LINK HERE</a>

Forward code:

HTML Code

<a style='cursor:pointer' onclick='history.go(1)'>IMAGE SRC LINK HERE</a>

After leaving those for a few days, Me and a friend wanted to add before/after images when moused over so this is the code I came up with:

Spoiler for long code:

Now this does not work at all, IDK why?! It is almost exactly the same as the other expect for the link is pointed at users history...

I think maybe because the image is not hot linked to a url rather then pointing at the history as it is...I have not tried adding a href="" to it because I don't want to, but is that the reason, or do I have a error I don't see? Or am I missing something since the button is pointed at the users history?

Mickey · 01/08/2009 11:02 PM

Don't see why that isn't working, but why not try using jQuery? Imo it's a lot easier than javascript
The code could be

HTML Code

$('#link id').click(function() {thingy when click here});
$('#link id').hover(function() {code to run on hover}, function() {code to run off hover});

Gadget · 01/08/2009 11:19 PM

Mickey Wrote:Don't see why that isn't working, but why not try using jQuery? Imo it's a lot easier than javascript
The code could be
HTML Code
$('#link id').click(function() {thingy when click here});
$('#link id').hover(function() {code to run on hover}, function() {code to run off hover});

Good, I feel a little better, that you don't see why it don't work...I been banging my head against my keyboard trying to figure it out...

As for jQuery, hmmm I don't know that language, but I will see if I can get it to do what I want.

Thanks for the reply : D

Mc Cabe · 02/08/2009 12:03 AM

Hmmm I always try to use css instead of javascript. Try this:

Code:

<a href="javascript:history.go(-1)"><span>goback</span></a>

Code:

a {
   width: ##px;
   height: ##px;
   display: block;
   background: #000 url(insert-image-url) top left no-repeat;
}

a:hover {
   background: #000 url(insert-hover-image-url) top left no-repeat;
}

span {
  visibility: none;
}

Gadget · 02/08/2009 10:22 AM

Mc Cabe Wrote:Hmmm I always try to use css instead of javascript. Try this:
Code:
<a href="javascript:history.go(-1)"><span>goback</span></a>
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
a {
   width: ##px;
   height: ##px;
   display: block;
   background: #000 url(insert-image-url) top left no-repeat;
}

a:hover {
   background: #000 url(insert-hover-image-url) top left no-repeat;
}

span {
  visibility: none;
}

Well your code worked perfectly for the mouse over image however...It displayed that image allover my board & affected the main CSS,...

Maybe I didn't put it in the right spot? I used the code on the bottom box on my Additional CSS Definitions bottom box beneath all other codes...

look at what it did: [Image: 212fz3q.jpg]

Do you know what I did wrong or? I am on a VB3.8.2 if it helps...

Mc Cabe · 02/08/2009 10:28 AM

geez louise! hehe

'a' means all links, so all links have that styling. Try:

Code:

<a class="backandforward" href="javascript:history.go(-1)"><span>goback</span></a>

Code:

a.backandforward {
   width: ##px;
   height: ##px;
   display: block;
   background: transparent url(insert-image-url) top left no-repeat;
}

a.backandforward:hover {
   background: transparent url(insert-hover-image-url) top left no-repeat;
}

a.backandforward span {
  visibility: none;

  /* You could load the hover image here to stop the flicker
  background: transparent url(insert-hover-image-url) top left no-repeat; */
}

couldn't think of a good name for the class, feel free to change it :)

Gadget · 02/08/2009 10:48 AM

Mc Cabe Wrote:geez louise! hehe

'a' means all links, so all links have that styling. Try:

My fault, I should've known...  I don't use CCS in VB that much so I don't use it period that much,...

Thanks for your help, I appreciate it. I will see if it corrects my issue,

EDIT:

The code works great now, only one issue left to sort out if you could help me with it?

This code causes the aligned images to stack ontop of eacoter...Make sense?  Back & Forward button are next to eachother until I use this code & then they stack cause lots of stuff to mis-align...

Almost like there is a <BR> tag in it!?  Is there a way to bring it back up next to eachother??

ZiNgA BuRgA · 02/08/2009 04:01 PM

Get rid of the "display: block;" line, though that might have some other effects.

Gadget · 02/08/2009 04:58 PM

ZiNgA BuRgA Wrote:Get rid of the "display: block;" line, though that might have some other effects.

lol, I did do that as I was researching CSS,..

I tried a few different options, "display: inline" was the best so far but caused the mouse over image to appear half shown and only at the bottom half of the area it is suppose to appear at.

ZiNgA BuRgA · 02/08/2009 05:00 PM

You probably need to set a width and height for the image. It's being set as a background so the element itself isn't sized to that.

Threaded Mode \| Linear Mode [SOLVED] HTML/JAVA mouseover code I solved my problem! Thanks for all the help!!! :D
Author	Message