Thread: Different size rollovers?

Here is my 'complicated' problem- I am creating some fancy link buttons on my new website. For each button, I want the rollover image to be larger than the original image - as if that isn't enough, I want the rollover image to (only) appear when the area of the original small image is highlighted:-

Does anyone know whether it is possible to do this in BV???

Not sure if its possible in BV as I dont use it but.. it is possible by using CSS

Click my catsnaps link below and hover over the left menu... do you mean that kind of effect??

Yep thats the effect, how do you do it? I've used photoshop.

Also, do the images have to be next to each other in order to work?

Please post yr website / URL

Rollover or Mouseover?
One is using photo gallery the other is from the navigation bar.

Yes, it is possible to change the images in the NavBar. Read this post by NavalDesign:
http://www.vodahost.com/vodatalk/blu...ght=navigation

rollover. The images I want to use have transparent bits in them, which don't work on nav bars, but do on rollovers.

Originally Posted by Brocula

rollover. The images I want to use have transparent bits in them, which don't work on nav bars, but do on rollovers.

Brocula..
All of these images, even the ones on Rob's site are identical size.
When you point your mouse over the image it will change.. the difference is that it is on a white background which gives the impression that it is smaller. Try moving the mouse within the same image area on the side of the text you will see that it will respond.

At the same time, Rob is correct, this can be by <style> elements, this requires creating your styles (defining the styles) and then calling on these styles in your actual text or image.. In simple terms, you will need to tell your text or images to change styles onmouseover.

How do I do this?

But I dont think a simple rollover is what Broc means. He wants the new image to appear in a slightly different part of the page when the thumb is rolled over. it leaves the original text/thumb intact while displaying a little piece of text or a pic in next to it or above it.

I dont know if you can do that in BV broc, Im not sure how advanced the 'style' settings are. I did it using CSS which is used in BV but like I said, im not sure how much you can manipulate it or how much you can add to it.

Oh got ya... why not look at the html source in Rob's page Broc..??

But I dont think a simple rollover is what Broc means. He wants the new image to appear in a slightly different part of the page when the thumb is rolled over. it leaves the original text/thumb intact while displaying a little piece of text or a pic in next to it or above it.

Cheers Rob, thats exactly what I mean, you've done a better job at explaining than me.

<winks> you can do that but not all of the code is on that page <sneaky eh>

<winks> you can do that but not all of the code is on that page <sneaky eh>

Please excuse my stupidity, but I am not literate at html code, could you explain it is what you've done on your page in idiot's terms?

to start with... Dont call yourself stupid hehehe

ok... the code below is the code for the menu that appears on each of my pages but there is some additional code on another page which controls the hover/rollover. you could add this code directly to your pages and it will work. all you need to do is edit the links and the wording that you want to appear when the menu is hovered over.

The bits in red do not belongin the code, i have added those by way of explanation as to whatthe code does

everything in blue is the code that you need and can be repeated for as many menu items as you need
everything must go inbetween the green tags which you also need included with the code
everything in red is an explanation of what the code does and shouldnt actually be in the code

Code:

<div id="menu">	

<div class="box"> start of the menu item, the line below is regular hyperlink
<a href="http://www.catsnaps.co.uk/www/webfulllist.html">Gallery List
<span class="left"></span> refers to coding on another page that controls width and position
<span class="right"></span> refers to coding on another page that controls width and position
	
<span class="lk"> as above but this is for box that appears when hovering over the link
See a complete list of all the galleries on this website the text that appears in the hover box
</span> end of spank class 'lk'
</a> end of hyperlink
</div> end of menu item

</div>

Nice one Rob, you're a star

you need some other code as well, that code wont work by itself Broc....

all of this code has to go in the head of each page that contains the menu. the head is at the top of your page Broc it starts with <head> and ends with </head>. this code must go inside those two tags

also, this code creates a vertical menu going down th page like mine, not a horizontal one going across the page. it also display text in the rollover not an image.

in the code above in my previous post... the green tags only need to be used once, one at the top one at the bottom. then you can copy and paste the blue bit as many times as you like for as many menu items as you need mate

WARNING: Publishing in BlueVoda may cause the code not to work. Using the FTP feature will be ok though.

Code:

<style type="text/css">
#menu {
  width:100px; 
  text-align:center; 
  position:relative;
  margin:1em auto;
  }
.box {
  position:relative;
  }
#menu a, #menu a:visited {
  font-size: 10px;
  font-family: Verdana, Helvetica, sans-serif;
  text-decoration:none;
  background-color:#fff; 
  color:#c00; 
  display:block; 
  width:88px; 
  height:16px; 
  border:1px solid #fff; 
  padding:5px;
  }
* html #menu a, * html #menu a:visited {
  width:150px; 
  height:28px; 
  w\idth:88px; 
  he\ight:16px;
  }
#menu a span {
  display:none;
  }
#menu a:hover {
  border:1px solid #EEE;
}
#menu a:hover span.left, 
#menu a:hover span.right {
  font-size: 12px;
  font-family: Verdana, Helvetica, sans-serif, font-weight: bold;
  display:block; 
  position:absolute; 
  height:0; 
  width:0; 
  overflow:hidden; 
  border-top:8px solid #fff; 
  border-bottom:8px solid #fff; 
  }
#menu a:hover span.left {
  left:5px; 
  top:5px; 
  border-left:8px solid #c00;
  }
#menu a:hover span.right {
  left:87px; 
  top:5px; 
  border-right:8px solid #c00;
  }
* html #menu a:hover span.left, 
* html #menu a:hover span.right {
  width:8px; 
  height:16px; 
  w\idth:0; 
  he\ight:0;
  }
#menu a:hover span.lk {
  display:block; 
  position:absolute; 
  left:120px; 
  top:0; 
  padding:5px; 
  width:100px;
  background-color:#fff; 
  color:#000; 
  border:1px solid #234;
  }
</style>