Pop Up Image - Controlling Image Size

[dorichcss]

1) Script Title:
Pop up image viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/style/cs...-image-viewer/
3) Describe problem:
This question has to do with variants of the original css. I have only rudimentary knowledge of CSS and so would appreciate some pointers.

I was interested in controlling the size of the image so I experimented with adding a simple class to the two image elements.

In the case of the smaller image this appeared to work as with the following:

html

img src="{filedir_1}thbnail.jpg" class="dim" border="0" alt="image" name="image"/>

css

img.dim {
	height: 37px;
	width: 60px;
}

This appears to work as expected, although whether its by luck or design I'm not sure.

Then I tried the same trick for the hover image, thus:
html

<span><img src="{filedir_1}LV_sales.jpg" class="large" border="0" alt="image" name="image" />
<br />US market is Shrinking</span></a>

css

img.large {
	height: 124px;
	width: 200px;
}

However, this doesn't work and the larger image appears in the original size.

I'd appreciate it if anyone can point out why this is not working, if there is a way to fix it, OR if there are some bad practices here that I should avoid.

Thx.

RB

[rangana]

I'm not certain about this, I can't also find the list on the src naming conventions. Maybe your image name, having brackets, causes an error

Why not just specify your image width and height in the img tag

<img src="{filedir_1}thbnail.jpg" class="dim" border="0" alt="image" name="image" width="60px" height="37px"/>

<span><img src="{filedir_1}LV_sales.jpg" class="large" border="0" alt="image" name="image" width="200px" height="124px"/>
<br />US market is Shrinking</span></a>

...Or you may wish to apply inline CSS

...If nothing works still, could you show us a live page

[codeexploiter]

Try to give the width and height in the following class and see what happens

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
width: 200px;
height: 124px
}

[dorichcss]

Try to give the width and height in the following class and see what happens

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
width: 200px;
height: 124px
}

Thanks for the suggestion.

This approach has the effect of changing the background box but the image stays the same size. See this page for example, hover the thumbnail graphic:
[URL="http://demo.expressionengine.com/uFgJLgdDKF/index.php/tutorial/bullet_list/[/URL]

It appears that you have to connect the dimensions of the image directly with the src definition.

Thx

[dorichcss]

I'm not certain about this, I can't also find the list on the src naming conventions. Maybe your image name, having brackets, causes an error

Thanks for the thought.
This is being used with "Expression Engine" and the image reference is parsed so if that is the problem I have no control over it.

Why not just specify your image width and height in the img tag

<img src="{filedir_1}thbnail.jpg" class="dim" border="0" alt="image" name="image" width="60px" height="37px"/>

<span><img src="{filedir_1}LV_sales.jpg" class="large" border="0" alt="image" name="image" width="200px" height="124px"/>
<br />US market is Shrinking</span></a>

...Or you may wish to apply inline CSS

...If nothing works still, could you show us a live page

Thanks for your response.

I thought I read that putting dimensions directly into src was being deprecated for html 4 onwards but now I can't find the reference so perhaps I'm incorrect on that point. So, in part, I was trying to follow what I thought were good practices.

Also I was using the "class" approach because I expect to do this with many images and I thought it would cut down on the amount of editing.

Your suggestion works, thanks.
The original can be seen at:
http://demo.expressionengine.com/uFg.../bullet_list2/