It could be better if the time I spend helping you was successfull at the end
I just would like to remember you what
r][m said about this way, fourth post of this topic
In fact, doing what you ask is really easy, but it's a hard bandwidth consumer as visitor will have load all the pictures present on the page.
In the other hand, it would be suicidal to have a onmouseover behavior that load a picture (suicidal's perhaps a bit strong, let's say... not so good and a visitor's nerves stress testing ^^)
If you have the time to wait for me to answer, send me your template file (expert mode, template, edit, then save it to a file and attach it here), because if you did as I said, it should work, so i'll instead prefer to modify your actual template, that way, you've got something that works.
And if you've got time to spend on testing, just :- Take the RAWR template you're using, in example for color blue, you have to open the
X:\HFS\template\rawr_blue\code\rawr_blue_main.css, insert the code in my previous post if it isn't already done, let's say at the end of .css file.
The code was and stays :
.picprev {position:relative; display:block; width:100px; height:100px;}
.picprev img{display:none; color:#000;}
.picprev:hover{color:#999;} /* for IE */
.picprev:hover img{display:block; position:absolute; top:0; left:0; width:100px; height:100px;}- Open the .tpl file then
- Go to the line you quote, the one with the onmouseover thing under
[preview-btn].
- Replace
<a href="javascript:void(0);"
onmouseover="initBox('Box-'+(%sequential%+1),this.name);" name="%item-full-url%">with
<div class="picprev"><img src="%item-url%" /></div> *note that I now use the original picture and only reduce it with CSS.Now, I'll try to explain what this do :
The line you insert make a blank square with no size and an image inside it.
This square is positioned where you put the line (for the previous post, at the preview button),
The fact that you only see the image when you go over
"something" is a behavior coming with the CSS lines (that remain the same as my previous post, you must add them if you want this to work).
Now you can change where and how large the picture will appear.
The way I told you in the previous post was replacing the preview button behavior, it's not the best way I think, as when you'll have a video folder, or a music folder, it will try to find a picture, that's why I talk about a switch thing on the picture extension that you use.
In short :
- the line you insert in the .tpl file determine the position of the square that will contain the image, depending if you put it at the filename level, or at the preview button level...
- the one in the CSS file will define the size and position of the preview, relatively to the element where you have inserted the code in, in the
.tpl file. (and also hide/show the pic)
if you want to have the preview appears just up the filename, you'll insert the html code at the filename level, in example just before the
<a href... ...</a>, and in css will do something like
top:-10px;. this should place the preview pic 10 pixels up where you insert the HTML code.
If all this is too obscure, or/and if I'm completely un-understandable, just send your template file and tell me which element should make the preview appear onmouseover, and where preview should be placed when showing itself.
Please, try to stay reasonable ^^
